'use client'; import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { ChevronDown } from 'lucide-react'; type AccordionItemType = { value: string; title: string; content: string; }; const defaultItems: AccordionItemType[] = [ { value: 'item-1', title: 'Can I save my preferences across devices?', content: "Your preferences are synced in real time, so your experience stays consistent whether you're on mobile, tablet, or desktop.", }, { value: 'item-2', title: 'How fast is the interface?', content: 'The interface is optimized for speed with minimal re-renders and smooth transitions, ensuring a responsive and fluid experience.', }, { value: 'item-3', title: 'Is there offline support?', content: "Core functionality remains accessible offline, allowing you to continue working and sync changes once you're back online.", }, { value: 'item-4', title: 'Can I extend components easily?', content: 'Components are built with extensibility in mind, making it easy to layer additional logic, styles, or behaviors as needed.', }, { value: 'item-5', title: 'Does it support dark mode out of the box?', content: 'Yes, all components are designed with native dark mode support, ensuring visual consistency across themes.', }, ]; interface AccordionProps { items?: AccordionItemType[]; className?: string; defaultOpenItem?: string; } export default function Accordion({ items = defaultItems, className, defaultOpenItem, }: AccordionProps) { const initialOpenItem = defaultOpenItem; const [openItems, setOpenItems] = useState( initialOpenItem ? [initialOpenItem] : [], ); const toggleItem = (value: string) => { setOpenItems((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value], ); }; return (

{items.map((item) => { const isOpen = openItems.includes(item.value); return ( {isOpen && (

{item.content}

)} ); })}

); }

Accordion

Installation

Usage