accordion

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { ChevronDown } from 'lucide-react';
5import { AnimatePresence, motion } from 'motion/react';
6import React, { type ReactNode, useCallback } from 'react';
7 
8/**
9 * Interface for AccordionContext values
10 */
11interface AccordionContextType {
12  /**
13   * Whether the accordion item is active
14   */
15  isActive?: boolean;
16  /**
17   * The value of the accordion item
18   */
19  value?: string;
20  /**
21   * Function to change the active index
22   */
23  onChangeIndex?: (value: string) => void;
24}
25 
26/**
27 * Context for accordion components
28 */
29const AccordionContext = React.createContext<AccordionContextType>({});
30/**
31 * Hook to use the accordion context
32 */
33const useAccordion = () => React.useContext(AccordionContext);
34 
35/**
36 * Container component for accordion items
37 */
38export function AccordionContainer({
39  children,
40  className,
41}: {
42  children: ReactNode;
43  className?: string;
44}) {
45  return <div className={cn('grid grid-cols-2 gap-1', className)}>{children}</div>;
46}
47 
48/**
49 * Wrapper component for accordion items
50 */
51export function AccordionWrapper({ children }: { children: ReactNode }) {
52  return <div>{children}</div>;
53}
54 
55/**
56 * Interface for Accordion props
57 */
58interface AccordionProps {
59  /**
60   * Children components
61   */
62  children: ReactNode;
63  /**
64   * Whether multiple items can be active at the same time
65   */
66  multiple?: boolean;
67  /**
68   * Default active index
69   */
70  defaultValue?: string | string[];
71}
72 
73/**
74 * Accordion component
75 */
76export function Accordion({ children, multiple, defaultValue }: AccordionProps) {
77  /**
78   * State for active index
79   */
80  const [activeIndex, setActiveIndex] = React.useState<string | string[] | null>(
81    multiple ? (Array.isArray(defaultValue) ? defaultValue : []) : defaultValue || null
82  );
83 
84  /**
85   * Function to change the active index
86   */
87  const onChangeIndex = useCallback(
88    (value: string) => {
89      setActiveIndex((currentActiveIndex) => {
90        if (!multiple) {
91          return value === currentActiveIndex ? null : value;
92        }
93 
94        if (Array.isArray(currentActiveIndex)) {
95          if (currentActiveIndex.includes(value)) {
96            return currentActiveIndex.filter((i) => i !== value);
97          }
98          return [...currentActiveIndex, value];
99        }
100 
101        return [value];
102      });
103    },
104    [multiple]
105  );
106 
107  return React.Children.map(children, (child) => {
108    if (!React.isValidElement(child)) return null;
109 
110// … truncated