// @name: FAQ Searchable // @dependencies: lucide-react import { useState } from "react"; import { Search, SearchX } from "lucide-react"; const ITEMS = [ { q: "How do I reset my password?", a: "Use the reset link on the sign-in page. The link is valid for 30 minutes." }, { q: "How do I enable two-factor authentication?", a: "Settings → Security → Two-factor. Authenticator apps and hardware keys are both supported." }, { q: "Can I use a custom domain?", a: "Yes, on any paid plan. Add a CNAME and we issue the certificate automatically." }, { q: "What browsers do you support?", a: "The last two major versions of Chrome, Firefox, Safari and Edge." }, { q: "Is there an API rate limit?", a: "600 requests per minute per token, burstable to 1,200 for short periods." }, { q: "How do I export my data?", a: "Settings → Data → Export produces a JSON archive, emailed to you within ten minutes." }, ]; export default function FaqSearchable() { const [query, setQuery] = useState(""); const needle = query.trim().toLowerCase(); const visible = needle ? ITEMS.filter((item) => (item.q + " " + item.a).toLowerCase().includes(needle)) : ITEMS; return (

Search the documentation

Search questions setQuery(e.target.value)} placeholder="Try “password” or “API”" className="w-full rounded-full border border-[var(--border)] bg-[var(--card)] py-3 pl-11 pr-4 text-sm text-[var(--card-foreground)] outline-none placeholder:text-[var(--muted-foreground)] focus:border-[var(--primary)]" />

{visible.length > 0 ? (

{item.q}: {item.a}

) : (

Nothing matches “{query}”

Try a shorter phrase, or ask support directly.

)}

); }

More faq sections

FAQ Accordion Simple

FAQ Two Column

FAQ Split Contact