4a:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4b:T235b,"use client" import { motion } from "motion/react" import { useId, useState } from "react" const spring = { type: "spring" as const, stiffness: 500, damping: 45, mass: 1 } const DEFAULT_SIZE = 80 const getScale = (size: number) => size / 121 // ─── Color Themes ──────────────────────────────────────────────────────────── type ColorTheme = { front: [string, string, string, string, string] back: [string, string, string, string, string] shadowIntensity: { highlight: number; shadow: number; drop: number } borderHighlight: number } const colorThemes = { black: { front: ["#4A4A4A", "#2C2C2C", "#1A1A1A", "#0D0D0D", "#1F1F1F"], back: ["#525252", "#3D3D3D", "#252525", "#181818", "#0E0E0E"], shadowIntensity: { highlight: 0.15, shadow: 0.4, drop: 0.5 }, borderHighlight: 0.18, }, green: { front: ["#7A8B6F", "#657A58", "#566B4A", "#465A3C", "#526645"], back: ["#5C6B50", "#4F5E44", "#435139", "#38452F", "#2E3926"], shadowIntensity: { highlight: 0.25, shadow: 0.25, drop: 0.35 }, borderHighlight: 0.3, }, blue: { front: ["#6B8DB5", "#4A7099", "#3A5F85", "#2B4D6E", "#35587A"], back: ["#4A6A8A", "#3D5A78", "#314B65", "#263D53", "#1E3244"], shadowIntensity: { highlight: 0.2, shadow: 0.3, drop: 0.4 }, borderHighlight: 0.25, }, purple: { front: ["#8B7AAF", "#7460A0", "#604D8D", "#4D3B78", "#5A4585"], back: ["#6B5A8A", "#5C4D78", "#4D4065", "#3E3353", "#322944"], shadowIntensity: { highlight: 0.2, shadow: 0.3, drop: 0.4 }, borderHighlight: 0.25, }, } satisfies Record export type FanFolderColor = keyof typeof colorThemes // ─── Component ─────────────────────────────────────────────────────────────── export const FanFolder = ({ size = DEFAULT_SIZE, color = "black", }: { size?: number color?: FanFolderColor }) => { const [hovered, setHovered] = useState(false) const s = getScale(size) const svgHeight = Math.round(108 * s) const bodyHeight = Math.round(78 * s) const cardW = Math.round(44 * s) const cardH = Math.round(52 * s) const theme = colorThemes[color] ?? colorThemes.black const cardVariants = { hidden: { opacity: 0, y: 0, x: 0, rotate: 0, scale: 1, pointerEvents: "none" as const }, left: { opacity: 1, y: -38 * s, x: -28 * s, rotate: -15, scale: 1.25, pointerEvents: "auto" as const }, center: { opacity: 1, y: -47 * s, x: -4 * s, rotate: 6, scale: 1.25, pointerEvents: "auto" as const }, right: { opacity: 1, y: -34 * s, x: 20 * s, rotate: 23, scale: 1.25, pointerEvents: "auto" as const }, } return ( setHovered(true)} onHoverEnd={() => setHovered(false)} animate={hovered ? { y: 5 } : { y: 0 }} transition={spring} > {/* Folder SVG background */} {/* 3 white cards - fan out on hover */} {/* Folder body overlay */}

) } // ─── SVG Back Panel ────────────────────────────────────────────────────────── const FOLDER_PATH = "M 0 15.319 C 0 6.858 7.179 0 16.035 0 L 34.354 0 C 39.172 0 43.878 1.382 47.864 3.968 L 60.431 12.117 C 64.416 14.703 69.122 16.085 73.94 16.085 L 104.697 16.085 C 113.527 16.085 120.696 22.905 120.733 31.341 L 121 92.617 C 121.037 101.103 113.847 108 104.964 108 L 16.035 108 C 7.179 108 0 101.142 0 92.681 Z" export const FolderSvg = ({ size = DEFAULT_SIZE, color = "black", }: { size?: number color?: FanFolderColor }) => { const s = getScale(size) const uid = useId() const theme = colorThemes[color] ?? colorThemes.black const backId = `f1Back-${uid}` const shineId = `f1Shine-${uid}` const edgeId = `f1Edge-${uid}` const vignetteId = `f1Vignette-${uid}` return ( ) } 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4a",null,{"files":[{"path":"components/library/fan-folder.tsx","content":"$4b","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]