Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 118x 118x | /**
* RegistrationAccordion Component (Story 4.1.5 - Task 4a)
*
* Accordion wrapper using shadcn Collapsible for smooth step transitions.
* Used in registration wizard for step-by-step form flow.
*/
import { ReactNode } from 'react';
import { Collapsible, CollapsibleContent } from '@/components/public/ui/collapsible';
export interface RegistrationAccordionProps {
/** Whether the accordion section is expanded */
isExpanded: boolean;
/** Section title */
title: string;
/** Content to display when expanded */
children: ReactNode;
/** Optional summary content shown when collapsed */
summary?: ReactNode;
/** Optional click handler for the title */
onToggle?: () => void;
}
/**
* Accordion component for registration wizard steps.
* Provides smooth expand/collapse animations using shadcn Collapsible.
*/
export const RegistrationAccordion = ({
isExpanded,
title,
children,
summary,
onToggle,
}: RegistrationAccordionProps) => {
const handleHeaderClick = () => {
// Only allow toggle when collapsed
if (!isExpanded && onToggle) {
onToggle();
}
};
return (
<Collapsible
open={isExpanded}
className="border border-zinc-800 rounded-lg overflow-hidden bg-zinc-900/50"
>
<div
className={`p-4 transition-colors ${
isExpanded ? 'bg-zinc-800/50' : 'cursor-pointer hover:bg-zinc-800/30'
}`}
onClick={handleHeaderClick}
role="button"
tabIndex={isExpanded ? -1 : 0}
>
<h3 className="text-lg font-light text-zinc-100">{title}</h3>
</div>
{/* Collapsed state summary */}
{!isExpanded && summary && (
<div className="p-4 border-t border-zinc-800">
<div className="text-sm text-zinc-400">{summary}</div>
</div>
)}
{/* Expanded state content */}
<CollapsibleContent className="transition-all duration-300 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
<div className="p-6 border-t border-zinc-800">{children}</div>
</CollapsibleContent>
</Collapsible>
);
};
|