FAQ 01

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 Faq01Props {
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. Copy, paste, and customize to build faster.",
30  },
31  {
32    title: "Is it free to use?",
33    description:
34      "Yes, all components are free and open source. Use them in personal and commercial projects without restrictions.",
35  },
36  {
37    title: "Can I customize the components?",
38    description:
39      "Absolutely! Since you own the code, you can customize every aspect. Change colors, sizes, animations, and more to match your brand.",
40  },
41  {
42    title: "What dependencies are required?",
43    description:
44      "Components are built on shadcn/ui and Tailwind CSS. Some components may require additional dependencies like Radix UI primitives.",
45  },
46];
47 
48const Faq01 = ({
49  label = "FAQ",
50  title = "Common Questions",
51  description,
52  items = defaultItems,
53  className,
54}: Faq01Props) => (
55  <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
56    <div className="flex flex-col items-center gap-4 text-center">
57      {label && (
58        <p className="text-sm font-semibold tracking-widest text-muted-foreground uppercase">
59          {label}
60        </p>
61      )}
62      <h2 className="text-4xl leading-tight font-medium tracking-tight md:text-5xl">
63        {title}
64      </h2>
65      {description && (
66        <p className="max-w-xl text-muted-foreground md:text-lg">
67          {description}
68        </p>
69      )}
70    </div>
71    <Accordion
72      type="single"
73      collapsible
74      className="mx-auto mt-12 flex max-w-5xl flex-col gap-4"
75    >
76      {items.map((item, index) => (
77        <AccordionItem
78          key={index}
79          value={`item-${index}`}
80          className="relative rounded-md border-0 bg-muted/50 px-6 data-[state=open]:bg-muted"
81        >
82          <AccordionTrigger className="group flex items-center justify-between gap-4 py-5 text-left text-lg font-medium hover:no-underline">
83            {item.title}
84// … truncated