faqs-5

1"use client";
2import { Search, SearchSlash } from "lucide-react";
3import React from "react";
4import {
5  Accordion,
6  AccordionContent,
7  AccordionItem,
8  AccordionTrigger,
9} from "@/components/ui/accordion";
10import { Button } from "@/components/ui/button";
11import {
12  Empty,
13  EmptyContent,
14  EmptyHeader,
15  EmptyMedia,
16  EmptyTitle,
17} from "@/components/ui/empty";
18import {
19  InputGroup,
20  InputGroupAddon,
21  InputGroupInput,
22} from "@/components/ui/input-group";
23import { cn } from "@/lib/utils";
24 
25export function FaqsSection() {
26  const [searchTerm, setSearchTerm] = React.useState("");
27  const [activeCategory, setActiveCategory] = React.useState("all");
28 
29  const categories = [
30    { id: "all", label: "All" },
31    { id: "getting-started", label: "Getting Started" },
32    { id: "features", label: "Features" },
33    { id: "billing", label: "Billing" },
34    { id: "support", label: "Support" },
35  ];
36 
37  const filtered = faqs.filter((faq) => {
38    const matchesCategory =
39      activeCategory === "all" || faq.category === activeCategory;
40    const matchesSearch =
41      faq.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
42      faq.content.toLowerCase().includes(searchTerm.toLowerCase());
43    return matchesCategory && matchesSearch;
44  });
45 
46  return (
47    <div className="mx-auto min-h-screen w-full max-w-3xl md:border-x">
48      <div className="px-4 py-16 lg:px-6">
49        <h1 className="mb-4 font-semibold text-3xl md:text-4xl">
50          Frequently Asked Questions
51        </h1>
52        <p className="mb-8 max-w-2xl text-muted-foreground">
53          Find answers to common questions about Freddy. Can't find what you're
54          looking for? Our support team is here to help.
55        </p>
56 
57        <InputGroup className="max-w-sm">
58          <InputGroupInput
59            onChange={(e) => setSearchTerm(e.target.value)}
60            placeholder="Search FAQs..."
61            value={searchTerm}
62          />
63          <InputGroupAddon>
64            <Search />
65          </InputGroupAddon>
66        </InputGroup>
67      </div>
68 
69      <div className="absolute inset-x-0 h-px bg-border" />
70 
71      <div className="flex flex-wrap gap-1 border-b px-4 md:gap-3">
72        {categories.map((cat) => (
73          <button
74            className="flex flex-col"
75            key={cat.id}
76            onClick={() => setActiveCategory(cat.id)}
77            type="button"
78          >
79            <span
80              className={cn(
81// … truncated