Autocomplete Start Content 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 AutocompleteStartContentExample = () => {
24  const [token, setToken] = useState<string>("");
25 
26  return (
27    <div className="flex flex-col gap-4 w-full max-w-72">
28      <Autocomplete value={token} onChange={setToken} variant="bordered">
29        <AutocompleteInput
30          placeholder="Select a token"
31          className="rounded-2xl"
32          startContent={
33            token && (
34              <Image
35                src={`/tokens/${token}.svg`}
36                alt={token}
37                width={24}
38                height={24}
39                className="rounded-full"
40              />
41            )
42          }
43        />
44        <AutocompleteContent>
45          {TOKENS.map((token) => (
46            <AutocompleteItem key={token} value={token} label={token}>
47              <div className="flex items-center gap-1.5">
48                <Image
49                  src={`/tokens/${token}.svg`}
50                  alt={token}
51                  width={24}
52                  height={24}
53                  className="rounded-full"
54                />
55                <span>{token}</span>
56              </div>
57            </AutocompleteItem>
58          ))}
59          <AutocompleteEmpty>No results.</AutocompleteEmpty>
60        </AutocompleteContent>
61      </Autocomplete>
62    </div>
63  );
64};