'use client' import { Fragment } from 'react' import type { LucideIcon } from 'lucide-react' import { Box, Check, Download, Ellipsis, Link as LinkIcon, ListFilter, RefreshCw, Settings2, Share, SquareCheck, Users } from 'lucide-react' import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { cn } from '@/lib/utils' export interface BreadcrumbEntry { label: string href?: string } export interface HeaderStat { icon: LucideIcon value: string label: string } export interface DashboardHeaderProps { breadcrumbs?: BreadcrumbEntry[] greeting?: string userName?: string date?: string note?: string stats?: HeaderStat[] } const defaultBreadcrumbs: BreadcrumbEntry[] = [ { label: 'Daily Activity', href: '#' }, { label: 'Home' }, ] const defaultStats: HeaderStat[] = [ { icon: Box, value: '5', label: 'active projects' }, { icon: SquareCheck, value: '24', label: 'tasks open' }, { icon: Users, value: '92%', label: 'team capacity' }, { icon: Check, value: '12', label: 'shipped this week' }, ] export default function DashboardHeader({ breadcrumbs = defaultBreadcrumbs, greeting = 'Good morning', userName = 'Jimmy', date = 'Sunday, February 5 2026', note = 'Three things need your attention today', stats = defaultStats, }: DashboardHeaderProps) { return (

{breadcrumbs.map((crumb, index) => { const isLast = index === breadcrumbs.length - 1 return ( {isLast ? ( {crumb.label} ) : ( {crumb.label} )} {!isLast && } ) })}

{greeting}, {userName}

{date} · {note}

{stats.map((stat, index) => (

))}

) }

Dashboard Headers blocks