Autocomplete Invalid Demo

1import {
2  Autocomplete,
3  AutocompleteContent,
4  AutocompleteEmpty,
5  AutocompleteInput,
6  AutocompleteItem,
7} from "@/components/ui/autocomplete";
8import Image from "next/image";
9import { useState } from "react";
10 
11const TOKENS = [
12  "USDT",
13  "USDC",
14  "USDe",
15  "USDS",
16  "DAI",
17  "USD1",
18  "FDUSD",
19  "USDY",
20  "FRAX",
21];
22 
23export const AutocompleteInvalidExample = () => {
24  const inputVariants = ["default", "faded", "bordered", "underline"] as const;
25 
26  return (
27    <div className="flex flex-col gap-4 w-full max-w-72">
28      {inputVariants.map((variant) => (
29        <TokenAutocomplete key={variant} variant={variant} />
30      ))}
31    </div>
32  );
33};
34 
35const TokenAutocomplete = ({
36  variant,
37}: {
38  variant: "default" | "faded" | "bordered" | "underline";
39}) => {
40  const [token, setToken] = useState("");
41  return (
42    <Autocomplete
43      key={variant}
44      value={token}
45      onChange={setToken}
46      size="md"
47      variant={variant}
48    >
49      <AutocompleteInput
50        placeholder="Select a token"
51        aria-invalid
52        className={variant !== "underline" ? "rounded-2xl" : ""}
53        startContent={
54          token && (
55            <Image
56              src={`/tokens/${token}.svg`}
57              alt={token}
58              width={24}
59              height={24}
60              className="rounded-full"
61            />
62          )
63        }
64      />
65      <AutocompleteContent>
66        {TOKENS.map((token) => (
67          <AutocompleteItem key={token} value={token} label={token}>
68            <div className="flex items-center gap-1.5">
69              <Image
70                src={`/tokens/${token}.svg`}
71                alt={token}
72                width={24}
73                height={24}
74                className="rounded-full"
75              />
76              <span className="font-semibold">{token}</span>
77            </div>
78          </AutocompleteItem>
79        ))}
80        <AutocompleteEmpty>No results.</AutocompleteEmpty>
81      </AutocompleteContent>
82    </Autocomplete>
83  );
84};