jamsr_ui_autocomplete_basic_selectable_items_quickstart.ts

1"use client";
2
3import React from "react";
4import { Autocomplete, AutocompleteItem } from "@jamsr-ui/autocomplete";
5
6export default function App() {
7  const animals = [
8    { label: "Cat", value: "cat" },
9    { label: "Dog", value: "dog" },
10    { label: "Elephant", value: "elephant" },
11    { label: "Lion", value: "lion" },
12    { label: "Tiger", value: "tiger" },
13  ];
14
15  return (
16    <div className="flex w-full max-w-xs flex-col gap-4">
17      <Autocomplete
18        label="Select an animal"
19        placeholder="Search for an animal"
20        className="max-w-xs"
21      >
22        {animals.map((animal) => (
23          <AutocompleteItem key={animal.value} value={animal.value}>
24            {animal.label}
25          </AutocompleteItem>
26        ))}
27      </Autocomplete>
28    </div>
29  );
30}