38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/components/ui/Typography';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface CollapsibleSectionProps {
|
|
title: string;
|
|
children: ReactNode;
|
|
isOpen?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function CollapsibleSection({
|
|
title,
|
|
children,
|
|
isOpen = false,
|
|
className = ''
|
|
}: CollapsibleSectionProps) {
|
|
return (
|
|
<details className={`group mb-4 ${className}`} open={isOpen}>
|
|
<summary className="flex cursor-pointer items-center justify-between py-2">
|
|
<Heading level={3} className="font-medium">{title}</Heading>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-4 w-4 transition-transform duration-200 group-open:rotate-180"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</summary>
|
|
<div className="pt-2 pb-6">
|
|
{children}
|
|
</div>
|
|
</details>
|
|
);
|
|
}
|