"use client"; import { type ComponentType } from "react"; import { motion } from "framer-motion"; import { ChevronRight, Home, Folder, Layers, Settings } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; export type Crumb = { label: string; icon?: ComponentType<{ className?: string }>; }; export function Breadcrumbs({ items, className, }: { items: Crumb[]; className?: string; }) { return (

{/* thin bright top edge */}

{i > 0 && ( )} {isLast ? ( {Icon && } {item.label} ) : ( )}

); } export default function Demo() { const items: Crumb[] = [ { label: "Home", icon: Home }, { label: "Projects", icon: Folder }, { label: "Lumenite", icon: Layers }, { label: "Settings", icon: Settings }, ]; const rows = [ { label: "Workspace", value: "Lumenite" }, { label: "Default theme", value: "Liquid Dark" }, { label: "Preview branch", value: "main" }, ]; return (

Settings

Saved

Manage how your workspace builds, previews, and ships components.

{rows.map((row) => (

{row.label} {row.value}

))}

); }