"use client"; import { useState, useId, useEffect } from "react"; import { AnimatePresence, motion, useAnimation } from "motion/react"; import { IconX } from "@tabler/icons-react"; export default function FolderCards({ cardsData }: { cardsData: { title: string; desc: string }[] }) { const [isFolderOpen, setIsFolderOpen] = useState(false); const [activeCard, setActiveCard] = useState<{ title: string; desc: string; } | null>(null); const [delayedZIndex, setDelayedZIndex] = useState(2); const [isMobile, setIsMobile] = useState(false); const topControls = useAnimation(); const cardSpacing = isMobile ? 50 : 220; const totalCards = cardsData.length; const centerIndex = (totalCards - 1) / 2; const id = useId(); useEffect(() => { let timer: ReturnType; if(isFolderOpen) { timer = setTimeout(() => setDelayedZIndex(4), 200); }else { setDelayedZIndex(2); } return () => clearTimeout(timer); }, [isFolderOpen, activeCard]) useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < 690); handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { if (!activeCard) return; // Lock body scroll const doc = document.documentElement; const body = document.body; const scrollbarWidth = window.innerWidth - doc.clientWidth; // save previous inline styles to restore later const prevOverflow = body.style.overflow; const prevPaddingRight = body.style.paddingRight; body.style.overflow = "hidden"; if (scrollbarWidth > 0) body.style.paddingRight = {`${scrollbarWidth}px`}; // iOS touchmove prevention (to stop background momentum scrolling) const preventTouch = (e: TouchEvent) => { e.preventDefault(); }; // Use non-passive to allow preventDefault document.addEventListener("touchmove", preventTouch, { passive: false }); return () => { // restore body.style.overflow = prevOverflow || ""; body.style.paddingRight = prevPaddingRight || ""; document.removeEventListener("touchmove", preventTouch); }; }, [activeCard]); return (

{activeCard && } {activeCard && ( )}

{cardsData.map((card, index) => { const offset = (index - centerIndex) * cardSpacing; const isActive = activeCard?.title === card.title; const position = isMobile ? { y: isFolderOpen ? offset-200 : 0, x: 0 } : { x: isFolderOpen ? offset : 0, y: isFolderOpen ? -300 : 0 }; return ( { if (!isFolderOpen) return; setActiveCard(card); }} className="absolute w-50 h-10 md:h-[100px] md:w-[200px] px-5 py-3 md:p-0 flex items-center justify-center cursor-pointer rounded-xl border-[0.5px] border-zinc-200 bg-zinc-50 shadow-md" >

{card.title}

); })} setIsFolderOpen(!isFolderOpen)} whileHover={{ rotateX: -10 }} onHoverStart={() => topControls.start({ rotateX: 10 })} onHoverEnd={() => topControls.start({ rotateX: 0 })} transition={{ duration: 0.15, ease: "easeOut" }} />

); } function Backdrop() { return ( ); } function Modal({ activeCard, setActiveCard, id, }: { activeCard: { title: string; desc: string }; setActiveCard: (value: null) => void; id: string; }) { return ( setActiveCard(null)} >

{activeCard.title} {activeCard.desc}

); }

Folder Cards

Stack: