Autocomplete Variant 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 AutocompleteVariantExample = () => {
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        className={variant !== "underline" ? "rounded-2xl" : ""}
52        startContent={
53          token && (
54            <Image
55              src={`/tokens/${token}.svg`}
56              alt={token}
57              width={24}
58              height={24}
59              className="rounded-full"
60            />
61          )
62        }
63      />
64      <AutocompleteContent>
65        {TOKENS.map((token) => (
66          <AutocompleteItem key={token} value={token} label={token}>
67            <div className="flex items-center gap-1.5">
68              <Image
69                src={`/tokens/${token}.svg`}
70                alt={token}
71                width={24}
72                height={24}
73                className="rounded-full"
74              />
75              <span>{token}</span>
76            </div>
77          </AutocompleteItem>
78        ))}
79        <AutocompleteEmpty>No results.</AutocompleteEmpty>
80      </AutocompleteContent>
81    </Autocomplete>
82  );
83};