Compact Accordion

import CompactAccordion, {
  CompactAccordionItem,
} from "@/components/ruixen/compact-accordion";
import { HelpCircle, Settings } from "lucide-react";
 
const items: CompactAccordionItem[] = [
  {
    icon: HelpCircle,
    value: "item-1",
    question: "What is this component?",
    answer:
      "This is a compact accordion component with icons and smooth animations.",
  },
  {
    icon: Settings,
    value: "item-2",
    question: "How do I customize it?",
    answer:
      "You can customize the styling using Tailwind CSS classes and pass different icons.",
  },
];
 
export default function MyAccordion() {
  return <CompactAccordion items={items} />;
}

interface CompactAccordionItem {
  icon: ElementType; // Lucide React icon component
  value: string; // Unique identifier for the item
  question: string; // The question/title text
  answer: string; // The answer/content text
}

import CompactAccordion from "@/components/ruixen/compact-accordion";
import { HelpCircle } from "lucide-react";
 
const basicItems = [
  {
    icon: HelpCircle,
    value: "faq-1",
    question: "How does this work?",
    answer:
      "This accordion component organizes content in collapsible sections.",
  },
];
 
<CompactAccordion items={basicItems} />;

<CompactAccordion items={items} type="multiple" collapsible={true} />

<CompactAccordion items={items} className="space-y-4 max-w-2xl" />

import { HelpCircle, Info, Settings, Shield } from "lucide-react";
 
const faqItems = [
  {
    icon: HelpCircle,
    value: "general",
    question: "What is this service?",
    answer: "We provide a comprehensive solution for managing your workflow.",
  },
  {
    icon: Shield,
    value: "security",
    question: "Is my data secure?",
    answer: "Yes, we use enterprise-grade encryption and security measures.",
  },
  {
    icon: Settings,
    value: "setup",
    question: "How do I get started?",
    answer: "Simply sign up for an account and follow our onboarding guide.",
  },
  {
    icon: Info,
    value: "support",
    question: "How can I get help?",
    answer: "Contact our support team through the help center or live chat.",
  },
];
 
<CompactAccordion items={faqItems} />;