77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import * as React from 'react';
|
||
import { ChevronRight } from 'lucide-react';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
/**
|
||
* SectionHeader — the label row above a section or inside a card. Three levels
|
||
* so the hierarchy below a PageHeader stays predictable:
|
||
*
|
||
* - `overline` — a small all-caps group label ("INTERVIEW COMPLETION")
|
||
* - `card` — a card's own title row
|
||
* - `section` — a page-level section title
|
||
*/
|
||
/** @param {any} props */
|
||
export function SectionHeader({
|
||
title,
|
||
subtitle,
|
||
icon: Icon,
|
||
level = 'card',
|
||
actions,
|
||
/** Renders a "View all ›" affordance on the right. */
|
||
onViewAll,
|
||
viewAllLabel = 'View all',
|
||
className,
|
||
}) {
|
||
if (level === 'overline') {
|
||
return (
|
||
<div className={cn('flex items-center justify-between gap-3 mb-3', className)}>
|
||
<h2 className="text-overline uppercase text-ink-4 font-heading">{title}</h2>
|
||
{actions}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'flex items-start justify-between gap-3',
|
||
level === 'section' ? 'mb-4' : 'mb-5',
|
||
className
|
||
)}
|
||
>
|
||
<div className="flex items-start gap-2.5 min-w-0">
|
||
{Icon && (
|
||
<span className="grid place-items-center w-8 h-8 rounded-lg bg-krow-blue-tint text-krow-blue shrink-0">
|
||
<Icon className="w-4 h-4" aria-hidden="true" />
|
||
</span>
|
||
)}
|
||
<div className="min-w-0">
|
||
<h3
|
||
className={cn(
|
||
'font-heading text-ink-1 truncate',
|
||
level === 'section' ? 'text-title-lg' : 'text-title'
|
||
)}
|
||
>
|
||
{title}
|
||
</h3>
|
||
{subtitle && <p className="text-caption text-ink-3 mt-0.5">{subtitle}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 shrink-0">
|
||
{actions}
|
||
{onViewAll && (
|
||
<button
|
||
type="button"
|
||
onClick={onViewAll}
|
||
className="inline-flex items-center gap-1 text-caption font-medium text-krow-blue hover:underline focus-ring rounded-sm"
|
||
>
|
||
{viewAllLabel}
|
||
<ChevronRight className="w-3 h-3" aria-hidden="true" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|