50:I[707087,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T31a1,"use client"; import * as React from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowUpRight, ChevronLeft, ChevronRight, X } from "lucide-react"; import { cn } from "@/lib/utils"; export type FolderProject = { id: string; title: string; image: string; href?: string; }; export type ThreeDFolderProps = { title?: string; projects?: FolderProject[]; folderBackColor?: string; folderFrontColor?: string; folderTabColor?: string; /** "sm" renders at ~60% scale for grid/multi-folder layouts. */ size?: "sm" | "md"; className?: string; }; const DEFAULT_PROJECTS: FolderProject[] = [ { id: "atlas", title: "Atlas", image: "https://plus.unsplash.com/premium_photo-1669842162407-abfc5f9e981e?q=80&w=1035&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", href: "https://example.com", }, { id: "prism", title: "Prism", image: "https://images.unsplash.com/photo-1589634749362-a8ef3056cbe9?q=80&w=1035&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", href: "https://example.com", }, { id: "signal", title: "Signal", image: "https://images.unsplash.com/photo-1764310722996-fe07553fd10c?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", href: "https://example.com", }, ]; const cardPositions = { md: [ { x: -60, rotate: -13, z: 22 }, { x: 0, rotate: 0, z: 24 }, { x: 60, rotate: 13, z: 22 }, ], sm: [ { x: -36, rotate: -13, z: 22 }, { x: 0, rotate: 0, z: 24 }, { x: 36, rotate: 13, z: 22 }, ], }; export function ThreeDFolder({ title = "Design Archive", projects = DEFAULT_PROJECTS, folderBackColor = "#fb7185", folderFrontColor = "#fbbf24", folderTabColor = "#f97316", size = "md", className, }: ThreeDFolderProps) { const sm = size === "sm"; const [hovered, setHovered] = React.useState(false); const [activeIndex, setActiveIndex] = React.useState(null); const visibleProjects = projects.slice(0, 3); const activeProject = activeIndex === null ? null : projects[activeIndex]; const positions = cardPositions[size]; const navigate = React.useCallback( (direction: 1 | -1) => { setActiveIndex((current) => { if (current === null) return current; return Math.max(0, Math.min(projects.length - 1, current + direction)); }); }, [projects.length], ); React.useEffect(() => { if (activeIndex === null) return; function handleKeyDown(event: KeyboardEvent) { if (event.key === "Escape") setActiveIndex(null); if (event.key === "ArrowRight") navigate(1); if (event.key === "ArrowLeft") navigate(-1); } document.body.style.overflow = "hidden"; window.addEventListener("keydown", handleKeyDown); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", handleKeyDown); }; }, [activeIndex, navigate]); return ( <>

setHovered(true)} onMouseLeave={() => setHovered(false)} >

{/* Back panel */} {/* Tab */} {visibleProjects.map((project, index) => { const position = positions[index] ?? positions[1]!; return ( setActiveIndex(index)} className="absolute left-1/2 top-1/2 overflow-hidden rounded-xl border border-white/70 bg-white text-left shadow-2xl" style={{ height: sm ? "70px" : "112px", width: sm ? "48px" : "80px", zIndex: position.z, }} initial={false} animate={{ x: hovered ? position.x - (sm ? 24 : 40) : sm ? -24 : -40, y: hovered ? (sm ? -88 : -142) : sm ? -34 : -56, rotate: hovered ? position.rotate : 0, scale: hovered ? 1 : 0.55, opacity: hovered ? 1 : 0, }} transition={{ type: "spring", stiffness: 240, damping: 20, delay: hovered ? index * 0.05 : 0, }} >

{project.title} ); })} {/* Front panel */}

{title}

{projects.length} projects

Hover to explore

{activeProject ? ( setActiveIndex(null)} > event.stopPropagation()} >

{activeProject.title}

Use arrow keys to browse the folder.

{activeProject.href ? ( View ) : null}

) : null} ); } export default ThreeDFolder; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/three-d-folder/index.ts","content":"export { ThreeDFolder } from \"./three-d-folder\";\nexport type { FolderProject, ThreeDFolderProps } from \"./three-d-folder\";\n","type":"registry:lib","target":"components/three-d-folder/index.ts"},{"path":"next-ui/three-d-folder/three-d-folder.tsx","content":"$52","type":"registry:component","target":"components/three-d-folder/three-d-folder.tsx"}],"className":"h-[70svh] min-h-80"}]]}]