chore: 2.1

src/components/ui/collapsible-infobox.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export interface CollapsibleInfoboxProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function CollapsibleInfobox({
+  title,
+  children,
+  defaultOpen = false,
+  className = "",
+}: CollapsibleInfoboxProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div
+      className={`bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4 ${className}`}
+    >
+      <div
+        className="flex items-center justify-between cursor-pointer"
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
+          {title}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-9 p-0"
+          tabIndex={-1}
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+        >
+          {open ? (
+            <ChevronUp className="h-4 w-4" />
+          ) : (
+            <ChevronDown className="h-4 w-4" />
+          )}
+          <span className="sr-only">Toggle {title}</span>
+        </Button>
+      </div>
+      {open && <div className="mt-2">{children}</div>}
+    </div>
+  );
+}