faq-accordion

1"use client";
2 
3import React, { useState } from "react";
4import { cn } from "@/lib/utils";
5 
6export interface FaqItem {
7  question: string;
8  answer: React.ReactNode;
9}
10 
11export interface FaqAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
12  items?: FaqItem[];
13  title?: string;
14}
15 
16const DEFAULT_ITEMS: FaqItem[] = [
17  { question: "What is Vengeance UI?", answer: "Vengeance UI is a high-performance, dark-mode first component library designed for the next generation of web applications." },
18  { question: "Can I use it with Tailwind CSS?", answer: "Yes! All components are built on top of Tailwind CSS and highly customizable using utility classes." },
19  { question: "Are the components accessible?", answer: "Accessibility is a core focus. We ensure proper ARIA attributes, keyboard navigation, and semantic HTML structure." },
20  { question: "Do I need to install a heavy npm package?", answer: "No. Vengeance UI provides a CLI that lets you copy and paste only the components you need directly into your project." },
21  { question: "Is it compatible with React and Next.js?", answer: "Absolutely. The library is built with React in mind and perfectly supports Next.js Server Components and client-side rendering." },
22];
23 
24export function FaqAccordion({
25  items = DEFAULT_ITEMS,
26  title = "Vengeance UI FAQs",
27  className,
28  ...props
29}: FaqAccordionProps) {
30  const [activeIndex, setActiveIndex] = useState<number | null>(null);
31 
32  const toggleItem = (index: number) => {
33    setActiveIndex(activeIndex === index ? null : index);
34  };
35 
36  return (
37    <div className={cn("w-full max-w-3xl mx-auto py-8 relative font-sans", className)} {...props}>
38      {title && (
39        <h2 className="text-center font-bold text-2xl md:text-3xl mb-10 text-neutral-500 dark:text-neutral-400">
40          {title}
41        </h2>
42      )}
43      
44      <ul className="w-full mx-auto list-none p-0 flex flex-col">
45        {items.map((item, index) => {
46          const isActive = activeIndex === index;
47          return (
48            <li
49              key={index}
50              className={cn(
51                "w-full relative transition-all duration-300 ease-in",
52                "border-b-2 border-neutral-100 dark:border-neutral-800",
53                "last:border-b-0",
54                isActive ? "border-b border-neutral-200 dark:border-neutral-700" : ""
55              )}
56            >
57              <button
58                className={cn(
59// … truncated