accordion

1'use client';
2import React, { ReactNode, ReactElement, isValidElement } from 'react';
3import { AnimatePresence, motion } from 'motion/react';
4import { ChevronDown } from 'lucide-react';
5import { cn } from '@/lib/utils';
6
7type AccordionContextType = {
8  isActive: boolean;
9  value: string;
10  onChangeIndex: (value: string) => void;
11};
12
13const AccordionContext = React.createContext<AccordionContextType>({
14  isActive: false,
15  value: '',
16  onChangeIndex: () => {},
17});
18
19const useAccordion = () => React.useContext(AccordionContext);
20
21export function AccordionContainer({
22  children,
23  className,
24}: {
25  children: ReactNode;
26  className?: string;
27}) {
28  return (
29    <div className={cn('grid grid-cols-2 gap-1', className)}>{children}</div>
30  );
31}
32
33export function AccordionWrapper({ children }: { children: ReactNode }) {
34  return <div>{children}</div>;
35}
36
37export function Accordion({
38  children,
39  multiple,
40  defaultValue,
41}: {
42  children: ReactNode;
43  multiple?: boolean;
44  defaultValue?: string | string[];
45}) {
46  const [activeIndex, setActiveIndex] = React.useState<string[]>(
47    multiple
48      ? defaultValue
49        ? Array.isArray(defaultValue)
50          ? defaultValue
51          : [defaultValue]
52        : []
53      : defaultValue
54        ? Array.isArray(defaultValue)
55          ? [defaultValue[0]]
56          : [defaultValue]
57        : []
58  );
59
60  function onChangeIndex(value: string) {
61    setActiveIndex((currentActiveIndex) => {
62      if (!multiple) {
63        return value === currentActiveIndex[0] ? [] : [value];
64      }
65
66      if (currentActiveIndex.includes(value)) {
67        return currentActiveIndex.filter((i) => i !== value);
68      }
69
70      return [...currentActiveIndex, value];
71    });
72  }
73
74  return React.Children.map(children, (child) => {
75    if (!isValidElement<{ value?: string }>(child)) return null;
76
77    const value = child.props.value ?? '';
78    const isActive = multiple
79      ? activeIndex.includes(value)
80      : activeIndex[0] === value;
81
82    return (
83      <AccordionContext.Provider value={{ isActive, value, onChangeIndex }}>
84        {React.cloneElement(child)}
85      </AccordionContext.Provider>
86    );
87  });
88}
89
90export function AccordionItem({
91  children,
92  value,
93  className,
94}: {
95  children: ReactNode;
96  value: string;
97  className?: string;
98}) {
99  const { isActive } = useAccordion();
100
101  return (
102    <div
103      data-active={isActive || undefined}
104// … truncated