'use client'; import { useState, useMemo } from 'react'; export default function FaqSearchDemo() { const [search, setSearch] = useState(''); const [category, setCategory] = useState('all'); const [openId, setOpenId] = useState(null); const categories = ['all', 'billing', 'technical', 'account']; const faqs = [ { id: '1', cat: 'billing', q: 'How do I update my payment method?', a: 'Go to Settings > Billing > Payment Methods to add or update your card.' }, { id: '2', cat: 'billing', q: 'Can I get a refund?', a: 'We offer a 30-day money-back guarantee for all plans.' }, { id: '3', cat: 'technical', q: 'What browsers are supported?', a: 'We support Chrome, Firefox, Safari, and Edge (latest versions).' }, { id: '4', cat: 'technical', q: 'Is there an API available?', a: 'Yes, we offer a REST API with comprehensive documentation.' }, { id: '5', cat: 'account', q: 'How do I reset my password?', a: 'Click "Forgot Password" on the login page and follow the instructions.' }, { id: '6', cat: 'account', q: 'Can I change my username?', a: 'Yes, go to Settings > Profile to update your username.' }, ]; const filtered = useMemo(() => { return faqs.filter(faq => { const matchesCategory = category === 'all' || faq.cat === category; const matchesSearch = search === '' || faq.q.toLowerCase().includes(search.toLowerCase()) || faq.a.toLowerCase().includes(search.toLowerCase()); return matchesCategory && matchesSearch; }); }, [search, category]); return (

Frequently Asked Questions

Find answers to common questions

{/* Search */}

🔍 setSearch(e.target.value)} placeholder="Search questions..." className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

{/* Category Tabs */}

{categories.map((cat) => ( ))}

{/* FAQ List */} {filtered.length > 0 ? (

{filtered.map((faq) => (

{openId === faq.id && (

{faq.a}

)}

))}

) : (

🔍

No results found for "{search}"

)} {/* Contact CTA */}

Still have questions?

); }

FAQ with Search

How can we help?

How do I get started?

What payment methods do you accept?

Can I cancel my subscription?

How do I invite team members?

Is my data secure?