continue re-design

components/shared/layout/animated-height.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { motion, MotionProps, TargetAndTransition } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/utils/cn";
+
+type AnimatedHeight = {
+  children: React.ReactNode;
+  animate?: TargetAndTransition;
+  initial?: TargetAndTransition;
+  exit?: TargetAndTransition;
+  className?: string;
+  transition?: MotionProps["transition"];
+};
+
+export default function AnimatedHeight({ children, ...attrs }: AnimatedHeight) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [height, setHeight] = useState<number | "auto">("auto");
+
+  useEffect(() => {
+    const child = containerRef.current?.children[0] as Element;
+
+    const updateHeight = () => {
+      if (!child) return;
+
+      setHeight(child.clientHeight);
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+
+    resizeObserver.observe(child);
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  return (
+    <motion.div
+      {...attrs}
+      animate={{
+        height,
+        ...attrs.animate,
+      }}
+      className={cn(attrs.className)}
+      initial={{
+        height,
+        ...attrs.initial,
+      }}
+      ref={containerRef}
+    >
+      <div className="h-max">{children}</div>
+    </motion.div>
+  );
+}