Autocomplete Disabled Item Demo

1"use client";
2 
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  {
15    value: "USDT",
16    disabled: false,
17  },
18  {
19    value: "USDC",
20    disabled: true,
21  },
22  {
23    value: "USDe",
24    disabled: false,
25  },
26  {
27    value: "USDS",
28    disabled: false,
29  },
30];
31 
32export const AutocompleteDisabledItemExample = () => {
33  const inputVariants = ["default", "faded", "bordered", "underline"] as const;
34 
35  return (
36    <div className="flex flex-col gap-4 w-full max-w-72">
37      {inputVariants.map((variant) => (
38        <TokenAutocomplete key={variant} variant={variant} />
39      ))}
40    </div>
41  );
42};
43 
44const TokenAutocomplete = ({
45  variant,
46}: {
47  variant: "default" | "faded" | "bordered" | "underline";
48}) => {
49  const [token, setToken] = useState("");
50  return (
51    <Autocomplete
52      key={variant}
53      value={token}
54      onChange={setToken}
55      size="md"
56      variant={variant}
57    >
58      <AutocompleteInput
59        placeholder="Select a token"
60        className={variant !== "underline" ? "rounded-2xl" : ""}
61        startContent={
62          token && (
63            <Image
64              src={`/tokens/${token}.svg`}
65              alt={token}
66              width={24}
67              height={24}
68              className="rounded-full"
69            />
70          )
71        }
72      />
73      <AutocompleteContent>
74        {TOKENS.map(({ value, disabled }) => (
75          <AutocompleteItem
76            key={value}
77            value={value}
78            label={value}
79            disabled={disabled}
80          >
81            <div className="flex items-center gap-1.5">
82              <Image
83                src={`/tokens/${value}.svg`}
84                alt={value}
85                width={24}
86                height={24}
87                className="rounded-full"
88              />
89              <span>{value}</span>
90            </div>
91          </AutocompleteItem>
92        ))}
93        <AutocompleteEmpty>No results.</AutocompleteEmpty>
94      </AutocompleteContent>
95    </Autocomplete>
96  );
97};