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:T266f,"use client"; import React, { useState } from "react"; import { motion, LayoutGroup, AnimatePresence, type Transition } from "motion/react"; import { List, LayoutGrid, Layers, Star, Check } from "lucide-react"; import { cn } from "@/lib/utils"; export interface CollectionItem { id: string; title: string; subtitle: string; badge: string; image: string; icon: React.ElementType; } export type ViewMode = "list" | "card" | "pack"; // ─── Constants (hoisted – zero per-render cost) ────────────────────────────── const S: Transition = { type: "spring", stiffness: 400, damping: 32, mass: 0.8 }; const S_TAB: Transition = { type: "spring", stiffness: 500, damping: 35, mass: 0.6 }; const S_CHECK: Transition = { type: "spring", stiffness: 500, damping: 30 }; const FADE: Transition = { duration: 0.12, ease: [0.25, 0.1, 0.25, 1] }; const GPU: React.CSSProperties = { willChange: "transform", transform: "translateZ(0)", backfaceVisibility: "hidden" }; const RESET = { rotate: 0, x: 0, y: 0 }; const PACK_X = 22; const TABS: { mode: ViewMode; icon: React.ElementType }[] = [ { mode: "list", icon: List }, { mode: "card", icon: LayoutGrid }, { mode: "pack", icon: Layers }, ]; // ─── View-mode class maps (avoids repeated ternaries in render) ────────────── const GRID_CLS: Record = { list: "flex flex-col gap-2", card: "grid grid-cols-2 gap-3", pack: "h-64 flex items-center justify-center mt-4", }; const CARD_CLS: Record = { list: "flex-row gap-4 w-full rounded-lg", card: "flex-col gap-3 w-full items-start rounded-xl", pack: "absolute w-56 h-56 items-center justify-center rounded-xl", }; const IMG_CLS: Record = { list: "w-16 h-16 rounded-lg border border-border", card: "w-full aspect-square rounded-lg border border-border shadow-sm", pack: "w-full h-full rounded-lg border border-border shadow-lg", }; const WRAP_CLS: Record = { list: "p-2", card: "p-3", pack: "py-4", }; // ─── Sub-components ────────────────────────────────────────────────────────── const ViewTab = React.memo(function ViewTab({ active, onClick, icon: Icon }: { active: boolean; onClick: () => void; icon: React.ElementType; }) { return ( ); }); const ItemInfo = React.memo(function ItemInfo({ item, view }: { item: CollectionItem; view: ViewMode }) { const Icon = item.icon; const [checked, setChecked] = useState(false); const isCard = view === "card"; return (

{item.title}

{item.badge}

{item.subtitle}

setChecked((p) => !p)} className={cn( "shrink-0 flex items-center justify-center border transition-all duration-200 outline-none rounded-sm", isCard ? "size-6" : "size-7 mr-2", checked ? "bg-card border-primary text-primary" : "bg-card border-border text-foreground/80 hover:border-primary/40" )} > {checked && ( )} ); }); // ─── Main component ────────────────────────────────────────────────────────── export interface AnimatedLayoutProps { items: CollectionItem[]; defaultView?: ViewMode; heading?: string; className?: string; } export function AnimatedLayout({ items, defaultView = "list", heading = "My Tasks", className }: AnimatedLayoutProps) { const [view, setView] = useState(defaultView); const len = items.length; return (

{heading}

{items.map((item, i) => ( {view !== "pack" && } ))}

); } export default AnimatedLayout;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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@grootstudio","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/radix-nova/animated-layout/animated-layout.tsx","content":"$52","type":"registry:component","target":"@components/grootstudio/animated-layout.tsx"}],"className":"h-[70svh] min-h-80"}]]}]