init

frontend/components/ui/collapsible.tsx

@@ -0,0 +1,41 @@
+'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>
+  )
+}