feat: added collapsible panel component

2026-05-28 17:45:20 -07:00
parent 70888d4096
commit b6f9d33e55
1 changed files with 56 additions and 0 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+
+type CollapsibleProps = {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  defaultOpen?: boolean;
+  children: ReactNode;
+};
+
+export default function Collapsible({
+  title,
+  subtitle,
+  defaultOpen = false,
+  children,
+}: CollapsibleProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-lg border border-neutral-800 bg-neutral-900/40 transition-colors hover:border-neutral-700">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex w-full items-center justify-between gap-4 px-4 py-3 text-left"
+      >
+        <div className="min-w-0">
+          <div className="text-[15px] font-medium text-neutral-100">
+            {title}
+          </div>
+          {subtitle && (
+            <div className="mt-0.5 text-xs text-neutral-400">{subtitle}</div>
+          )}
+        </div>
+        <IconChevronDown
+          size={18}
+          className={`shrink-0 text-neutral-500 transition-transform duration-200 ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      <div
+        className={`grid transition-[grid-template-rows] duration-300 ease-out ${
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        }`}
+      >
+        <div className="overflow-hidden">
+          <div className="border-t border-neutral-800 px-4 py-4">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}