Autocomplete Disabled Demo

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