FAQ 02

1"use client";
2 
3import { Plus, X } from "lucide-react";
4import { cn } from "@/lib/utils";
5import {
6  Accordion,
7  AccordionContent,
8  AccordionItem,
9  AccordionTrigger,
10} from "@/components/ui/accordion";
11 
12interface FaqItem {
13  title: string;
14  description: string;
15}
16 
17interface Faq02Props {
18  label?: string;
19  title?: string;
20  description?: string;
21  items?: FaqItem[];
22  className?: string;
23}
24 
25const defaultItems: FaqItem[] = [
26  {
27    title: "What is this component library?",
28    description:
29      "A collection of production-ready UI blocks built with shadcn/ui and Tailwind CSS.",
30  },
31  {
32    title: "Is it free to use?",
33    description:
34      "Yes, all components are free and open source for personal and commercial use.",
35  },
36  {
37    title: "Can I customize the components?",
38    description:
39      "Absolutely! You own the code and can customize every aspect to match your brand.",
40  },
41  {
42    title: "What dependencies are required?",
43    description:
44      "Components are built on shadcn/ui and Tailwind CSS with some Radix UI primitives.",
45  },
46  {
47    title: "How do I get started?",
48    description:
49      "Browse the components, copy the code, and paste it into your project. No setup required.",
50  },
51  {
52    title: "Is TypeScript supported?",
53    description:
54      "Yes, all components are written in TypeScript with full type safety.",
55  },
56];
57 
58const Faq02 = ({
59  label = "FAQ",
60  title = "Common Questions",
61  description,
62  items = defaultItems,
63  className,
64}: Faq02Props) => (
65  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
66    <div className="flex flex-col items-center gap-4 text-center">
67      {label && (
68        <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
69          {label}
70        </p>
71      )}
72      <h2 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl">
73        {title}
74      </h2>
75      {description && (
76        <p className="max-w-xl text-muted-foreground md:text-lg">
77          {description}
78        </p>
79      )}
80    </div>
81    <Accordion type="multiple" className="mt-12 grid gap-4 md:grid-cols-2">
82      {items.map((item, index) => (
83        <AccordionItem
84          key={index}
85          value={`item-${index}`}
86          className="relative h-fit rounded-md border-0 bg-muted/50 px-6 data-[state=open]:bg-muted"
87        >
88// … truncated