A search input with a scope picker built into the field (All, Docs, Issues, People) that filters its suggestion list by scope and recognizes a typed "in:docs" token as a shortcut for picking that scope.
"use client";
import { ScopedSearch } from "@/components/ui/scoped-search";
import type { ScopedSearchSuggestion } from "@/components/ui/scoped-search";
import { BookOpen, CircleDot, User } from "lucide-react";
const SUGGESTIONS: ScopedSearchSuggestion[] = [
{
id: "d1",
scope: "docs",
label: "Rate limits and retries",
hint: "API reference / Limits",
leading: <BookOpen size={15} />,
},
{
id: "d2",
scope: "docs",
label: "Rotating API keys",
hint: "Guides / Security",
leading: <BookOpen size={15} />,
},
{
id: "d3",
scope: "docs",
label: "Webhook retry schedule",
hint: "Guides / Webhooks",
leading: <BookOpen size={15} />,
},
{
id: "i1",
scope: "issues",
label: "Retry storm after deploy #4812",
hint: "Open · platform",
leading: <CircleDot size={15} />,
},
{
id: "p1",
scope: "people",
label: "Rahel Tesfaye",
hint: "Platform team",
leading: <User size={15} />,
},
];
export default function ScopedSearchStatesDemo() {
return (
<div className="flex min-h-[320px] w-full flex-col items-center justify-center gap-4 bg-background p-10">
<ScopedSearch
label="Search docs"
defaultScope="docs"
suggestions={SUGGESTIONS}
className="max-w-[420px]"
/>
<ScopedSearch
label="Search, disabled"
disabled
className="max-w-[420px]"
/>
</div>
);
}
