42 lines
987 B
TypeScript
42 lines
987 B
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { ChevronDown } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from './button'
|
|
|
|
interface CollapsibleProps {
|
|
title: string
|
|
children: React.ReactNode
|
|
defaultOpen?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function Collapsible({
|
|
title,
|
|
children,
|
|
defaultOpen = false,
|
|
className,
|
|
}: CollapsibleProps) {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen)
|
|
|
|
return (
|
|
<div className={cn('border rounded-lg', className)}>
|
|
<Button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
variant="ghost"
|
|
className="w-full justify-between p-4 h-auto font-semibold hover:bg-accent"
|
|
>
|
|
<span>{title}</span>
|
|
<ChevronDown
|
|
className={cn(
|
|
'h-5 w-5 transition-transform duration-200',
|
|
isOpen && 'transform rotate-180'
|
|
)}
|
|
/>
|
|
</Button>
|
|
{isOpen && <div className="p-4 pt-0 border-t">{children}</div>}
|
|
</div>
|
|
)
|
|
}
|