{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete-start-content-demo",
  "type": "registry:component",
  "title": "Autocomplete Start Content Demo",
  "description": "A demo of the autocomplete start content",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/autocomplete.json"
  ],
  "files": [
    {
      "path": "src/registry/example/autocomplete/start-content.tsx",
      "content": "import {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n} from \"@/components/ui/autocomplete\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\n\nconst TOKENS = [\n  \"USDT\",\n  \"USDC\",\n  \"USDe\",\n  \"USDS\",\n  \"DAI\",\n  \"USD1\",\n  \"FDUSD\",\n  \"USDY\",\n  \"FRAX\",\n];\n\nexport const AutocompleteStartContentExample = () => {\n  const [token, setToken] = useState<string>(\"\");\n\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-72\">\n      <Autocomplete value={token} onChange={setToken} variant=\"bordered\">\n        <AutocompleteInput\n          placeholder=\"Select a token\"\n          className=\"rounded-2xl\"\n          startContent={\n            token && (\n              <Image\n                src={`/tokens/${token}.svg`}\n                alt={token}\n                width={24}\n                height={24}\n                className=\"rounded-full\"\n              />\n            )\n          }\n        />\n        <AutocompleteContent>\n          {TOKENS.map((token) => (\n            <AutocompleteItem key={token} value={token} label={token}>\n              <div className=\"flex items-center gap-1.5\">\n                <Image\n                  src={`/tokens/${token}.svg`}\n                  alt={token}\n                  width={24}\n                  height={24}\n                  className=\"rounded-full\"\n                />\n                <span>{token}</span>\n              </div>\n            </AutocompleteItem>\n          ))}\n          <AutocompleteEmpty>No results.</AutocompleteEmpty>\n        </AutocompleteContent>\n      </Autocomplete>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/autocomplete-start-content-demo.tsx"
    }
  ]
}