Components
Loading preview...
This is combobox component
npx shadcn@latest add https://21st.dev/r/lyanchouss/combobox"use client";
import { useState } from "react";
import { Combobox, type ComboboxOption } from "@/components/ui/combobox";
const options: ComboboxOption[] = [
{ value: "scout", label: "Scout pass", description: "First scan before the sprint opens up" },
{ value: "transit", label: "Transit window", description: "Tighter route through the midfield line" },
{ value: "deep", label: "Deep field", description: "Longer view with less traffic around it" },
{ value: "late-run", label: "Late run", description: "Arrive second and attack the gap late" },
];
export function ComboboxPreview() {
const [value, setValue] = useState("transit");
return (
<div style={{ width: "100%", padding: "24px" }}>
<Combobox
className="w-full"
emptyMessage="No route matches that query."
onChange={setValue}
options={options}
placeholder="Pick a route..."
value={value}
/>
</div>
);
}
export default ComboboxPreview;