'use client'; import { motion } from 'framer-motion'; import { type FocusEvent, useRef, useState } from 'react'; import { cn } from '@/lib/utils'; type FolderCardId = 'back' | 'middle' | 'front'; interface FolderCards01Props { className?: string; } type CardLayout = { left: string; top: string; width: string; height: string; base: { rotate: number; x: number }; hover: { rotate: number; x: number }; }; const ASSETS = { backOfFolder: '/components-assets/FolderCards01/back-of-folder.svg', frontOfFolder: '/components-assets/FolderCards01/front-of-folder.svg', cardBack: '/components-assets/FolderCards01/card-back.svg', cardMiddle: '/components-assets/FolderCards01/card-middle.svg', cardFront: '/components-assets/FolderCards01/card-front.svg' } as const; const CARD_BUTTON_BASE = 'absolute select-none rounded-[32px] outline-none focus-visible:ring-2 focus-visible:ring-black/20'; // Reduced slightly from raw Figma bounds so cards don't pour out of sides. const CARD_BASE_SCALE = 0.92; const cardTransition = { type: 'spring', stiffness: 420, damping: 28, mass: 0.7 } as const; const CARD_LAYOUT: Record = { back: { left: 'left-[6.49%]', top: 'top-[13%]', width: 'w-[70%]', height: 'h-[94.45%]', base: { rotate: -10, x: -6 }, hover: { rotate: -6, x: -3 } }, middle: { left: 'left-[34.14%]', top: 'top-[0%]', width: 'w-[70%]', height: 'h-[94.45%]', base: { rotate: 8, x: -12 }, hover: { rotate: 4.5, x: -6 } }, front: { left: 'left-[16.99%]', top: 'top-[11.71%]', width: 'w-[70%]', height: 'h-[94.45%]', base: { rotate: -4, x: 0 }, hover: { rotate: -1.5, x: -1 } } }; export default function FolderCards01({ className }: FolderCards01Props) { const [activeCard, setActiveCard] = useState('front'); const [hoveredCard, setHoveredCard] = useState(null); const backCardRef = useRef(null); const middleCardRef = useRef(null); const frontCardRef = useRef(null); const handleCardClick = (cardId: FolderCardId) => { setActiveCard(cardId); }; const handleContainerPointerMove = (event: React.PointerEvent) => { const { clientX, clientY } = event; const elements = document.elementsFromPoint(clientX, clientY); const backEl = backCardRef.current; const middleEl = middleCardRef.current; const frontEl = frontCardRef.current; if (!backEl && !middleEl && !frontEl) return; const hit = elements.find((element) => { if (frontEl?.contains(element)) return true; if (middleEl?.contains(element)) return true; if (backEl?.contains(element)) return true; return false; }); if (!hit) { setHoveredCard(null); return; } if (frontEl?.contains(hit)) { setHoveredCard('front'); return; } if (middleEl?.contains(hit)) { setHoveredCard('middle'); return; } if (backEl?.contains(hit)) { setHoveredCard('back'); } }; const handleCardFocus = (event: FocusEvent, cardId: FolderCardId) => { if (!event.currentTarget.matches(':focus-visible')) return; setHoveredCard(cardId); }; const handleCardBlur = () => { setHoveredCard(null); }; return (

setHoveredCard(null)} > {/* Back of folder */}

{/* Card: back */} handleCardClick('back')} onFocus={(event) => handleCardFocus(event, 'back')} onBlur={handleCardBlur} initial={false} animate={ hoveredCard === 'back' ? { y: -18, rotate: CARD_LAYOUT.back.hover.rotate, x: CARD_LAYOUT.back.hover.x, scale: CARD_BASE_SCALE * 1.02 } : { y: -6, rotate: CARD_LAYOUT.back.base.rotate, x: CARD_LAYOUT.back.base.x, scale: CARD_BASE_SCALE } } whileTap={{ y: -10, rotate: -8, scale: 0.99 }} transition={cardTransition} className={cn( CARD_BUTTON_BASE, CARD_LAYOUT.back.left, CARD_LAYOUT.back.top, CARD_LAYOUT.back.width, CARD_LAYOUT.back.height, 'z-10', (hoveredCard === 'back' || activeCard === 'back') && 'z-40' )} > Back card

{/* Card: middle */} handleCardClick('middle')} onFocus={(event) => handleCardFocus(event, 'middle')} onBlur={handleCardBlur} initial={false} animate={ hoveredCard === 'middle' ? { y: -18, rotate: CARD_LAYOUT.middle.hover.rotate, x: CARD_LAYOUT.middle.hover.x, scale: CARD_BASE_SCALE * 1.02 } : { y: 0, rotate: CARD_LAYOUT.middle.base.rotate, x: CARD_LAYOUT.middle.base.x, scale: CARD_BASE_SCALE } } whileTap={{ y: -10, rotate: 6.5, scale: 0.99 }} transition={cardTransition} className={cn( CARD_BUTTON_BASE, CARD_LAYOUT.middle.left, CARD_LAYOUT.middle.top, CARD_LAYOUT.middle.width, CARD_LAYOUT.middle.height, 'z-20', (hoveredCard === 'middle' || activeCard === 'middle') && 'z-40' )} > Middle card

{/* Card: front */} handleCardClick('front')} onFocus={(event) => handleCardFocus(event, 'front')} onBlur={handleCardBlur} initial={false} animate={ hoveredCard === 'front' ? { y: -18, rotate: CARD_LAYOUT.front.hover.rotate, x: CARD_LAYOUT.front.hover.x, scale: CARD_BASE_SCALE * 1.02 } : { y: 0, rotate: CARD_LAYOUT.front.base.rotate, x: CARD_LAYOUT.front.base.x, scale: CARD_BASE_SCALE } } whileTap={{ y: -10, rotate: -3, scale: 0.99 }} transition={cardTransition} className={cn( CARD_BUTTON_BASE, CARD_LAYOUT.front.left, CARD_LAYOUT.front.top, CARD_LAYOUT.front.width, CARD_LAYOUT.front.height, 'z-30', (hoveredCard === 'front' || activeCard === 'front') && 'z-40' )} > Front card

{/* Front of folder */}

); }

Folder Cards

Tech

Category