Search field

"use client";import { SearchField } from "@/components/vip-ui/search-field";export function SearchFieldBasicDemo() {  return (    <SearchField      label="Search projects"      placeholder="Project name"      className="w-full max-w-xs"    />  );}

"use client";import { SearchField } from "@/components/vip-ui/search-field";export function SearchFieldDisabledDemo() {  return (    <SearchField      label="Search archive"      placeholder="Project name"      isDisabled      className="w-full max-w-xs"    />  );}

"use client";import { useState } from "react";import {  SearchField,  SearchFieldClear,  SearchFieldInput,  SearchFieldLabel,} from "@/components/vip-ui/search-field";const topics = ["Accessibility", "Animation", "Forms", "Layout", "Theming"];export function SearchFieldDemo() {  const [query, setQuery] = useState("");  const matches = topics.filter((topic) =>    topic.toLowerCase().includes(query.trim().toLowerCase()),  );  return (    <div className="grid w-full max-w-sm gap-4">      <SearchField name="topicSearch" value={query} onChange={setQuery}>        <SearchFieldLabel>Search topics</SearchFieldLabel>        <SearchFieldInput placeholder="Topic" />        <SearchFieldClear />      </SearchField>      {query ? (        <ul className="divide-y divide-border text-sm">          {matches.map((topic) => (            <li key={topic} className="py-2">              {topic}            </li>          ))}          {matches.length === 0 ? (            <li className="py-2 text-muted-foreground">              No topics match "{query}".            </li>          ) : null}        </ul>      ) : null}    </div>  );}

"use client";import { Button } from "@/components/vip-ui/button";import { SearchField } from "@/components/vip-ui/search-field";import { Select } from "@/components/vip-ui/select";export function SearchFieldSizesDemo() {  return (    <div className="grid w-full max-w-lg gap-6">      <SearchField        size="xl"        aria-label="Search the help center"        placeholder="Search the help center"      />      <div className="flex flex-wrap items-end gap-2">        <SearchField          size="sm"          aria-label="Search orders"          placeholder="Search orders"          className="min-w-40 flex-1"        />        <Select          size="sm"          aria-label="Status"          defaultValue="open"          options={[            { id: "open", name: "Open" },            { id: "paid", name: "Paid" },          ]}          className="w-32"        />        <Button size="sm" variant="outline">          Export        </Button>      </div>    </div>  );}