moving v2 to top level

src/components/Expandable.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { ReactNode, Dispatch, SetStateAction, useState, useRef } from "react";
+
+export function Expandable({
+  children,
+  ExpandableElement,
+  defaultExpanded = false,
+}: {
+  children: ReactNode;
+  ExpandableElement: (props: {
+    setIsExpanded: Dispatch<SetStateAction<boolean>>;
+    isExpanded: boolean;
+  }) => ReactNode;
+  defaultExpanded?: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const expandRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <ExpandableElement
+        setIsExpanded={setIsExpanded}
+        isExpanded={isExpanded}
+      />
+      <div
+        ref={expandRef}
+        className={` overflow-hidden transition-all `}
+        style={{
+          maxHeight: isExpanded ? expandRef?.current?.scrollHeight : "0",
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}