50: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"] 51:T1072,'use client'; import { Accordion, AccordionContainer, AccordionHeader, AccordionItem, AccordionPanel, AccordionWrapper, } from '@/components/ui/accordion'; import React from 'react'; function SingleLayout() { return ( What is a UI component? A UI (User Interface) component is a modular, reusable element that serves a specific function within a graphical user interface. Examples include buttons, input fields, dropdown menus, sliders. Why are components important? UI components promote consistency, efficiency, and scalability in software development. They allow developers to reuse code, maintain a consistent look and feel across an application. UI Component Traits Well-designed UI components should be modular, customizable, and accessible. They should have clear and intuitive functionality, be easily styled to match the overall design language. Does Component Improve UX? UI components can improve UX by providing familiar, consistent interactions that make it easy for users to navigate and interact with an application byy using recognizable patterns. component design challenges? Some common challenges include maintaining consistency across different devices and screen sizes, ensuring compatibility with various browsers and assistive technologies with ease of use. Ensure Responsiveness Developers can ensure the responsiveness of UI components by using techniques such as fluid layouts, flexible grids, and media queries to adapt the components to different screen sizes. ); } export default SingleLayout; 52: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} )} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"./registry/components/accordion/gridlayout.tsx","content":"$51","type":"registry:component"},{"path":"./components/ui/accordion.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]