"use client"; import { useEffect, useMemo, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ChevronDown, Search } from "lucide-react"; import { cn } from "@/lib/utils"; export interface FaqItem { question: string; answer: string; } export interface FaqSearchProps { items: FaqItem[]; /** Queries the field types on a loop to demo the search. Omit for a static list. */ autoQueries?: string[]; placeholder?: string; className?: string; } type Phase = "typing" | "holding" | "deleting"; const EASE = [0.16, 1, 0.3, 1] as const; function highlightText(text: string, query: string): React.ReactNode { const needle = query.trim().toLowerCase(); if (needle === "") return text; const haystack = text.toLowerCase(); const nodes: React.ReactNode[] = []; let cursor = 0; let key = 0; let found = haystack.indexOf(needle, cursor); while (found !== -1) { if (found > cursor) nodes.push(text.slice(cursor, found)); nodes.push( {text.slice(found, found + needle.length)} ); cursor = found + needle.length; found = haystack.indexOf(needle, cursor); } if (cursor < text.length) nodes.push(text.slice(cursor)); return nodes; } export function FaqSearch({ items, autoQueries = [], placeholder = "Search components, tokens, licensing", className, }: FaqSearchProps) { const [queryIndex, setQueryIndex] = useState(0); const [charCount, setCharCount] = useState(0); const [phase, setPhase] = useState("typing"); const [openId, setOpenId] = useState(null); const [paused, setPaused] = useState(false); const hasAuto = autoQueries.length > 0; const target = hasAuto ? autoQueries[queryIndex % autoQueries.length] : ""; const query = target.slice(0, charCount); // Drive the typing / holding / deleting loop. useEffect(() => { if (!hasAuto || paused) return; let delay: number; let advance: () => void; if (phase === "typing") { if (charCount < target.length) { delay = 78; advance = () => setCharCount((c) => c + 1); } else { delay = 1500; advance = () => setPhase("holding"); } } else if (phase === "holding") { delay = 1400; advance = () => setPhase("deleting"); } else { if (charCount > 0) { delay = 34; advance = () => setCharCount((c) => c - 1); } else { delay = 420; advance = () => { setQueryIndex((i) => (i + 1) % autoQueries.length); setPhase("typing"); }; } } const timer = setTimeout(advance, delay); return () => clearTimeout(timer); }, [hasAuto, paused, phase, charCount, target, autoQueries.length]); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); if (needle === "") return items; return items.filter( (item) => item.question.toLowerCase().includes(needle) || item.answer.toLowerCase().includes(needle) ); }, [items, query]); const firstMatch = filtered.length > 0 ? filtered[0].question : null; // Auto-expand the top result once the query settles; collapse while typing. // Skipped while paused so a reader's manual expansion stays put. useEffect(() => { if (paused) return; setOpenId(phase === "holding" && hasAuto ? firstMatch : null); }, [paused, phase, hasAuto, firstMatch]); const active = query.trim() !== ""; return (

setPaused(true)} onMouseLeave={() => setPaused(false)} className="flex h-[392px] flex-col overflow-hidden rounded-2xl border border-line bg-panel" >

Help center {filtered.length} {filtered.length === 1 ? "result" : "results"}

{query} {query === "" && ( {placeholder} )}

{filtered.map((item) => { const isOpen = openId === item.question; return ( {isOpen && (

{highlightText(item.answer, query)}

)} ); })} {filtered.length === 0 && (

No matching answers

Try a shorter or different keyword

)}

); } const DEMO_ITEMS: FaqItem[] = [ { question: "How do I install a component?", answer: "Copy the single component file into your project, or pull it with the CLI. Each file is self contained, so there is no runtime package to install and nothing to configure.", }, { question: "Does it support dark mode?", answer: "Yes. Every component is designed dark first against the void palette and reads its colors from CSS variables, so light and custom themes are a token swap away.", }, { question: "Is TypeScript strictly typed?", answer: "Components ship as strict TypeScript with fully typed props and zero any. Types travel with the source, so autocomplete and refactors work the moment you paste a file.", }, { question: "Can I use it in commercial projects?", answer: "The license covers unlimited commercial and client work for your whole team. There are no per seat fees, no usage caps, and no attribution requirement.", }, { question: "Which animation library is required?", answer: "Motion is the only animation dependency. It is lightweight and tree shakeable, and it drives every spring, transition, and gesture across the library.", }, { question: "Are the components responsive?", answer: "Each layout is built mobile first with fluid spacing, so panels reflow cleanly from small phones to wide desktop screens without extra breakpoints.", }, { question: "How do I customize the theme?", answer: "Design tokens live in one theme block. Override the brand, surface, and line variables once and every component picks up the change in place.", }, { question: "Are the components accessible?", answer: "Interactive components include focus rings, keyboard handlers, and ARIA labels, and they respect the reduced motion setting for people who turn animation off.", }, ]; export default function Demo() { return (

); }

FAQ Search