1 files changed, 46 insertions, 0 deletions
diff --git a/packages/excalidraw/components/Stats/Collapsible.tsx b/packages/excalidraw/components/Stats/Collapsible.tsx
new file mode 100644
index 0000000..13d476d
--- /dev/null
+++ b/packages/excalidraw/components/Stats/Collapsible.tsx
@@ -0,0 +1,46 @@
+import { InlineIcon } from "../InlineIcon";
+import { collapseDownIcon, collapseUpIcon } from "../icons";
+
+interface CollapsibleProps {
+  label: React.ReactNode;
+  // having it controlled so that the state is managed outside
+  // this is to keep the user's previous choice even when the
+  // Collapsible is unmounted
+  open: boolean;
+  openTrigger: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Collapsible = ({
+  label,
+  open,
+  openTrigger,
+  children,
+  className,
+}: CollapsibleProps) => {
+  return (
+    <>
+      <div
+        style={{
+          cursor: "pointer",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        className={className}
+        onClick={openTrigger}
+      >
+        {label}
+        <InlineIcon icon={open ? collapseUpIcon : collapseDownIcon} />
+      </div>
+      {open && (
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Collapsible;