Autocomplete Size 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 
23const ICON_SIZE = {
24  sm: 18,
25  md: 24,
26  lg: 32,
27};
28 
29export const AutocompleteSizeExample = () => {
30  const size = ["sm", "md", "lg"] as const;
31 
32  return (
33    <div className="flex flex-col gap-4 w-full max-w-72">
34      {size.map((size) => (
35        <TokenAutocomplete key={size} size={size} />
36      ))}
37    </div>
38  );
39};
40 
41const TokenAutocomplete = ({ size }: { size: "sm" | "md" | "lg" }) => {
42  const [token, setToken] = useState("");
43  return (
44    <Autocomplete
45      key={size}
46      value={token}
47      onChange={setToken}
48      size={size}
49      variant="bordered"
50    >
51      <AutocompleteInput
52        placeholder="Select a token"
53        className="rounded-2xl"
54        startContent={
55          token && (
56            <Image
57              src={`/tokens/${token}.svg`}
58              alt={token}
59              width={ICON_SIZE[size]}
60              height={ICON_SIZE[size]}
61              className="rounded-full"
62            />
63          )
64        }
65      />
66      <AutocompleteContent>
67        {TOKENS.map((token) => (
68          <AutocompleteItem key={token} value={token} label={token}>
69            <div className="flex items-center gap-1.5">
70              <Image
71                src={`/tokens/${token}.svg`}
72                alt={token}
73                width={ICON_SIZE[size]}
74                height={ICON_SIZE[size]}
75                className="rounded-full"
76              />
77              <span>{token}</span>
78            </div>
79          </AutocompleteItem>
80        ))}
81        <AutocompleteEmpty>No results.</AutocompleteEmpty>
82      </AutocompleteContent>
83    </Autocomplete>
84  );
85};