4f: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"] 50: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"] 51:T1408,"use client"; import { useState } from "react"; import { DemoFrame } from "../lib/demo-frame"; import { Breadcrumb, type BreadcrumbItem } from "./breadcrumb"; type Node = { name: string; modified: string; children?: Node[]; size?: string }; const TREE: Node = { name: "Acme", modified: "", children: [ { name: "Marketing", modified: "Oct 16", children: [ { name: "Website redesign", modified: "Oct 17", children: [ { name: "Design files", modified: "Oct 17", children: [ { name: "Homepage", modified: "Today", children: [ { name: "Hero light.fig", modified: "Today", size: "4.2 MB" }, { name: "Hero dark.fig", modified: "Today", size: "4.4 MB" }, { name: "Pricing table.fig", modified: "Yesterday", size: "1.8 MB" }, { name: "Footer.fig", modified: "Oct 14", size: "640 KB" }, { name: "Nav.fig", modified: "Oct 15", size: "310 KB" }, { name: "Testimonials.fig", modified: "Oct 15", size: "920 KB" }, { name: "CTA band.fig", modified: "Oct 13", size: "410 KB" }, { name: "Icons.fig", modified: "Oct 9", size: "1.1 MB" }, ], }, { name: "Product pages", modified: "Oct 15", children: [{ name: "Overview.fig", modified: "Oct 15", size: "3.1 MB" }] }, { name: "Brand assets", modified: "Oct 9", children: [{ name: "Logo kit.zip", modified: "Oct 9", size: "12 MB" }] }, ], }, { name: "Copy deck.docx", modified: "Oct 12", size: "88 KB" }, { name: "Launch plan.pdf", modified: "Oct 10", size: "1.2 MB" }, ], }, { name: "Q4 campaign", modified: "Oct 2", children: [{ name: "Brief.pdf", modified: "Oct 2", size: "320 KB" }] }, ], }, { name: "Finance", modified: "Oct 11", children: [{ name: "Budget 2027.xlsx", modified: "Oct 11", size: "210 KB" }] }, ], }; const Folder = () => ( ); const File = () => ( ); const Logo = () => ( A ); // Starts five folders deep, so a narrow tile has something to fold. const START = ["Marketing", "Website redesign", "Design files", "Homepage"]; export function BreadcrumbDemo() { const [path, setPath] = useState(START); const trail: Node[] = [TREE]; for (const name of path) trail.push(trail.at(-1)!.children!.find((c) => c.name === name)!); const here = trail.at(-1)!; const items: BreadcrumbItem[] = trail.map((node, i) => ({ label: node.name, icon: i === 0 ? : undefined, onClick: () => setPath(path.slice(0, i)), })); return (

{folder ? : } {node.name}

{folder ? node.modified : node.size}

{folder ? ( ) : (
{row}
)}

); } 4e:["$","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":[null,["$","$L4f",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/breadcrumb.json","https://eased.dev/r/eased-demo-frame.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/eased/breadcrumb/breadcrumb-demo.tsx","content":"$51","type":"registry:example","target":"@components/eased/breadcrumb/breadcrumb-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]