konnosDashboard
PageHeader.tsx135 lines · main
1import { useParams } from 'common'
2import { ChevronLeft } from 'lucide-react'
3import Link from 'next/link'
4import { Fragment, ReactNode } from 'react'
5import { cn } from 'ui'
6import {
7 Breadcrumb,
8 BreadcrumbItem,
9 BreadcrumbLink,
10 BreadcrumbList,
11 BreadcrumbPage as BreadcrumbPageItem,
12 BreadcrumbSeparator,
13} from 'ui/src/components/shadcn/ui/breadcrumb'
14
15import { ScaffoldDescription, ScaffoldTitle } from '../Scaffold'
16
17interface PageHeaderProps {
18 title?: string | ReactNode
19 subtitle?: string | ReactNode
20 icon?: ReactNode
21 breadcrumbs?: Array<{
22 label?: string
23 href?: string
24 element?: ReactNode
25 }>
26 primaryActions?: ReactNode
27 secondaryActions?: ReactNode
28 className?: string
29 isCompact?: boolean
30}
31
32export const PageHeader = ({
33 title,
34 subtitle,
35 icon,
36 breadcrumbs = [],
37 primaryActions,
38 secondaryActions,
39 className,
40 isCompact = false,
41}: PageHeaderProps) => {
42 const { ref } = useParams()
43
44 const displayBreadcrumbs = isCompact && title ? [...breadcrumbs, { label: title }] : breadcrumbs
45
46 return (
47 <div className={cn('space-y-4', className)}>
48 {(displayBreadcrumbs.length > 0 ||
49 (isCompact && (title || primaryActions || secondaryActions))) && (
50 <div className={cn('flex items-center gap-4', isCompact ? 'justify-between' : 'mb-4')}>
51 <div className="flex items-center gap-4 flex-1 min-w-0">
52 {breadcrumbs.length > 0 ? (
53 <Breadcrumb
54 className={cn('text-foreground-muted', isCompact && 'text-base', 'min-w-0 flex-1')}
55 >
56 <BreadcrumbList className={cn(isCompact ? 'text-base' : 'text-xs', 'min-w-0')}>
57 {breadcrumbs.map((item, index) => (
58 <Fragment key={item.label || `breadcrumb-${index}`}>
59 <BreadcrumbItem>
60 {item.element ? (
61 item.element
62 ) : item.href ? (
63 <BreadcrumbLink asChild className="flex items-center gap-2">
64 <Link href={!!ref ? item.href.replace('[ref]', ref) : item.href}>
65 {breadcrumbs.length === 1 && !isCompact && (
66 <ChevronLeft size={16} strokeWidth={1.5} />
67 )}
68 {item.label}
69 </Link>
70 </BreadcrumbLink>
71 ) : (
72 <BreadcrumbPageItem className="flex items-center gap-2">
73 {breadcrumbs.length === 1 && (
74 <ChevronLeft size={16} strokeWidth={1.5} />
75 )}
76 {item.label}
77 </BreadcrumbPageItem>
78 )}
79 </BreadcrumbItem>
80 {index < breadcrumbs.length - 1 && <BreadcrumbSeparator />}
81 </Fragment>
82 ))}
83 {isCompact && title && (
84 <>
85 <BreadcrumbSeparator />
86 <BreadcrumbItem className="min-w-0 flex-1">
87 <BreadcrumbPageItem className="min-w-0">{title}</BreadcrumbPageItem>
88 </BreadcrumbItem>
89 </>
90 )}
91 </BreadcrumbList>
92 </Breadcrumb>
93 ) : isCompact ? (
94 <div className="min-w-0 flex-1">{title}</div>
95 ) : null}
96 </div>
97 {isCompact && (
98 <div className="flex items-center gap-2 shrink-0">
99 {secondaryActions && (
100 <div className="flex items-center gap-2">{secondaryActions}</div>
101 )}
102 {primaryActions && <div className="flex items-center gap-2">{primaryActions}</div>}
103 </div>
104 )}
105 </div>
106 )}
107
108 {!isCompact && (
109 <div className="flex items-center justify-between gap-4">
110 <div className="space-y-4">
111 <div className="flex items-center gap-4">
112 {icon && <div className="text-foreground-light">{icon}</div>}
113 <div className="space-y-1">
114 {title &&
115 (typeof title === 'string' ? <ScaffoldTitle>{title}</ScaffoldTitle> : title)}
116 {subtitle &&
117 (typeof subtitle === 'string' ? (
118 <ScaffoldDescription className="text-sm text-foreground-light">
119 {subtitle}
120 </ScaffoldDescription>
121 ) : (
122 subtitle
123 ))}
124 </div>
125 </div>
126 </div>
127 <div className="flex items-center gap-2">
128 {secondaryActions && <div className="flex items-center gap-2">{secondaryActions}</div>}
129 {primaryActions && <div className="flex items-center gap-2">{primaryActions}</div>}
130 </div>
131 </div>
132 )}
133 </div>
134 )
135}