this repo has no description
1import { cn } from "~/design-system/utils/cn";
2
3interface SectionHeaderProps {
4 title: string;
5 subtitle?: string;
6 className?: string;
7}
8
9/**
10 * Section header with monospace styling.
11 *
12 * Used at the top of route pages to display:
13 * - The example number/title (e.g., "02_preloading")
14 * - An optional subtitle explaining the pattern
15 *
16 * @example
17 * <SectionHeader
18 * title="02_preloading"
19 * subtitle="// Route-level prefetch"
20 * />
21 */
22export function SectionHeader({ title, subtitle, className }: SectionHeaderProps) {
23 return (
24 <div
25 className={cn(
26 "flex items-center gap-3",
27 "py-3",
28 "border-b border-(--border-default)",
29 "mb-4",
30 className,
31 )}
32 >
33 <span
34 className={cn(
35 "text-base font-semibold",
36 "uppercase tracking-wider",
37 "text-(--text-secondary)",
38 "font-mono",
39 )}
40 >
41 {title}
42 </span>
43 {subtitle && <span className="text-sm text-(--text-muted) font-mono">{subtitle}</span>}
44 </div>
45 );
46}