jamsrui_autocomplete_basic_static_options_quickstart.ts

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