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 { useState } from "react";
import { BookOpen, CircleDot, User } from "lucide-react";
function Readout({ label, value }: { label: string; value: string }) {
return (
<p className="text-[11px] font-medium leading-tight text-ink-faint">
{label}: <code className="font-mono text-ink">{value || "—"}</code>
</p>
);
}
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: "i2",
scope: "issues",
label: "Rate limiter drops requests at burst #4790",
hint: "Closed · api",
leading: <CircleDot size={15} />,
},
{
id: "i3",
scope: "issues",
label: "Key rotation leaves stale cache #4755",
hint: "Open · auth",
leading: <CircleDot size={15} />,
},
{
id: "p1",
scope: "people",
label: "Rahel Tesfaye",
hint: "Platform team",
leading: <User size={15} />,
},
{
id: "p2",
scope: "people",
label: "Ravi Menon",
hint: "API team",
leading: <User size={15} />,
},
{
id: "p3",
scope: "people",
label: "Rosa Lindqvist",
hint: "Support",
leading: <User size={15} />,
},
];
export default function ScopedSearchDemo() {
const [scope, setScope] = useState("all");
const [query, setQuery] = useState("");
const [last, setLast] = useState("");
return (
<div className="flex min-h-[400px] w-full items-center justify-center bg-background p-10">
<div className="flex w-full max-w-[520px] flex-col gap-3">
<ScopedSearch
label="Search the workspace"
scope={scope}
onScopeChange={setScope}
value={query}
onValueChange={setQuery}
suggestions={SUGGESTIONS}
onSubmit={(text, where) => setLast(`search "${text}" in ${where}`)}
onSuggestionSelect={(item) =>
setLast(`open ${item.scope}/${item.id}`)
}
/>
<Readout label="scope" value={scope} />
<Readout label="last action" value={last} />
</div>
</div>
);
}
