Empty state

import { MagnifyingGlassIcon } from "@phosphor-icons/react/ssr";import { ButtonLink } from "@/components/vip-ui/button-link";import {  EmptyState,  EmptyStateActions,  EmptyStateDescription,  EmptyStateIcon,  EmptyStateTitle,} from "@/components/vip-ui/empty-state";export function EmptyStateDemo() {  return (    <EmptyState className="w-full max-w-md">      <EmptyStateIcon>        <MagnifyingGlassIcon aria-hidden="true" />      </EmptyStateIcon>      <EmptyStateTitle>No saved components</EmptyStateTitle>      <EmptyStateDescription>        Browse the catalog to find a component to use in your app.      </EmptyStateDescription>      <EmptyStateActions>        <ButtonLink href="/components">Browse components</ButtonLink>      </EmptyStateActions>    </EmptyState>  );}

import {  EmptyState,  EmptyStateDescription,  EmptyStateTitle,} from "@/components/vip-ui/empty-state";export function EmptyStateNoActionDemo() {  return (    <EmptyState className="w-full max-w-md">      <EmptyStateTitle>No saved items</EmptyStateTitle>      <EmptyStateDescription>Items you save appear here.</EmptyStateDescription>    </EmptyState>  );}

"use client";import { MagnifyingGlassIcon } from "@phosphor-icons/react";import { useRef, useState } from "react";import { Button } from "@/components/vip-ui/button";import {  EmptyState,  EmptyStateActions,  EmptyStateDescription,  EmptyStateIcon,  EmptyStateTitle,} from "@/components/vip-ui/empty-state";import { SearchField } from "@/components/vip-ui/search-field";const projects = ["Atlas", "Beacon", "Cascade", "Drift", "Ember"];export function EmptyStateSearchDemo() {  const [query, setQuery] = useState("Zephyr");  const fieldRef = useRef<HTMLDivElement>(null);  const matches = projects.filter((project) =>    project.toLowerCase().includes(query.trim().toLowerCase()),  );  return (    <div className="grid w-full max-w-md gap-3">      <SearchField        ref={fieldRef}        label="Search projects"        value={query}        onChange={setQuery}      />      {matches.length > 0 ? (        <ul className="grid min-h-56 content-start divide-y divide-border/70 rounded-xl border border-border bg-card px-4 text-sm shadow-[var(--shadow-card)]">          {matches.map((project) => (            <li key={project} className="py-2.5">              {project}            </li>          ))}        </ul>      ) : (        <EmptyState className="min-h-56 justify-center transition-[opacity,translate] duration-300 ease-out-quint starting:opacity-0 motion-safe:starting:translate-y-1">          <EmptyStateIcon>            <MagnifyingGlassIcon aria-hidden="true" />          </EmptyStateIcon>          <EmptyStateTitle>No projects found</EmptyStateTitle>          <EmptyStateDescription>            No project name contains “{query.trim()}”.          </EmptyStateDescription>          <EmptyStateActions>            <Button              variant="outline"              size="sm"              onPress={() => {                setQuery("");                fieldRef.current?.querySelector("input")?.focus();              }}            >              Clear search            </Button>          </EmptyStateActions>        </EmptyState>      )}    </div>  );}