4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1996,'use client'; import { cn } from '@/lib/utils'; import { ChevronDown } from 'lucide-react'; import { AnimatePresence, motion } from 'motion/react'; import React, { type ReactNode, useCallback } from 'react'; /** * Interface for AccordionContext values */ interface AccordionContextType { /** * Whether the accordion item is active */ isActive?: boolean; /** * The value of the accordion item */ value?: string; /** * Function to change the active index */ onChangeIndex?: (value: string) => void; } /** * Context for accordion components */ const AccordionContext = React.createContext({}); /** * Hook to use the accordion context */ const useAccordion = () => React.useContext(AccordionContext); /** * Container component for accordion items */ export function AccordionContainer({ children, className, }: { children: ReactNode; className?: string; }) { return

{children}

; } /** * Wrapper component for accordion items */ export function AccordionWrapper({ children }: { children: ReactNode }) { return

{children}

; } /** * Interface for Accordion props */ interface AccordionProps { /** * Children components */ children: ReactNode; /** * Whether multiple items can be active at the same time */ multiple?: boolean; /** * Default active index */ defaultValue?: string | string[]; } /** * Accordion component */ export function Accordion({ children, multiple, defaultValue }: AccordionProps) { /** * State for active index */ const [activeIndex, setActiveIndex] = React.useState( multiple ? (Array.isArray(defaultValue) ? defaultValue : []) : defaultValue || null ); /** * Function to change the active index */ const onChangeIndex = useCallback( (value: string) => { setActiveIndex((currentActiveIndex) => { if (!multiple) { return value === currentActiveIndex ? null : value; } if (Array.isArray(currentActiveIndex)) { if (currentActiveIndex.includes(value)) { return currentActiveIndex.filter((i) => i !== value); } return [...currentActiveIndex, value]; } return [value]; }); }, [multiple] ); return React.Children.map(children, (child) => { if (!React.isValidElement(child)) return null; const childProps = child.props as { value: string }; const value = childProps.value; const isActive = multiple ? Array.isArray(activeIndex) && activeIndex.includes(value) : activeIndex === value; return ( {child} ); }); } /** * Interface for AccordionItem props */ interface AccordionItemProps { /** * Children components */ children: ReactNode; /** * Value of the accordion item */ value: string; className?: string; } /** * Accordion item component */ export function AccordionItem({ children, value, className }: AccordionItemProps) { const { isActive } = useAccordion(); return (

{children}

); } /** * Interface for AccordionHeader props */ interface AccordionHeaderProps { /** * Children components */ children: ReactNode; /** * Icon component */ customIcon?: boolean; className?: string; } /** * Accordion header component */ export function AccordionHeader({ children, customIcon, className }: AccordionHeaderProps) { const { isActive, value, onChangeIndex } = useAccordion(); const handleClick = useCallback(() => { if (value && onChangeIndex) { onChangeIndex(value); } }, [onChangeIndex, value]); return ( {children} {!customIcon && ( ); } /** * Interface for AccordionPanel props */ interface AccordionPanelProps { /** * Children components */ children: ReactNode; /** * className */ className?: string; /** * article className */ articleClassName?: string; } /** * Accordion panel component */ export function AccordionPanel({ children, className, articleClassName }: AccordionPanelProps) { const { isActive, value } = useAccordion(); return ( {isActive && ( {children} )} ); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"./components/ui/accordion.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]