faqs-4

1"use client";
2import { CreditCard, Feather, LayoutGrid, LifeBuoy, Power } 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 { cn } from "@/lib/utils";
12 
13const categories = [
14  { icon: LayoutGrid, id: "all", label: "All Topics" },
15  { icon: Power, id: "getting-started", label: "Getting Started" },
16  { icon: Feather, id: "features", label: "Features" },
17  { icon: CreditCard, id: "billing", label: "Billing" },
18  { icon: LifeBuoy, id: "support", label: "Support" },
19];
20 
21export function FaqsSection() {
22  const [activeCategory, setActiveCategory] = React.useState("all");
23 
24  const filtered = faqs.filter((faq) => {
25    const matchesCategory =
26      activeCategory === "all" || faq.category === activeCategory;
27    return matchesCategory;
28  });
29 
30  const currentCategory = React.useMemo(
31    () => categories.find((cat) => cat.id === activeCategory),
32    [activeCategory]
33  );
34 
35  return (
36    <section className="mx-auto min-h-screen w-full max-w-5xl">
37      <div className="flex flex-col items-center justify-center gap-4 px-4 py-16">
38        <h2 className="text-balance font-black font-mono text-4xl md:text-5xl lg:font-black">
39          FaQs
40        </h2>
41        <p className="text-muted-foreground">Your questions answered here.</p>
42      </div>
43      <div className="relative grid min-h-full grid-cols-1 py-12 md:grid-cols-3">
44        <div className="flex h-full items-start justify-center border-b pb-2 md:border-b-0">
45          <div className="flex w-max flex-wrap items-start justify-start gap-2 md:flex-col md:justify-center">
46            {categories.map((cat) => (
47              <Button
48                className={cn(
49                  "border border-transparent",
50                  activeCategory === cat.id && "border-border"
51                )}
52                key={cat.id}
53                onClick={() => setActiveCategory(cat.id)}
54                variant={activeCategory === cat.id ? "outline" : "ghost"}
55              >
56                <cat.icon className="size-4" />
57                {cat.label}
58              </Button>
59            ))}
60          </div>
61        </div>
62        <div className="col-span-2 space-y-5 px-4 py-5">
63          {currentCategory && (
64            <div className="flex items-center gap-2">
65              <currentCategory.icon className="size-4" />
66// … truncated