303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
description?: string
|
|
icon?: ReactNode
|
|
action?: ReactNode
|
|
className?: string
|
|
titleClassName?: string
|
|
descriptionClassName?: string
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
icon,
|
|
action,
|
|
className,
|
|
titleClassName,
|
|
descriptionClassName,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className={cn('flex items-start justify-between gap-4', className)}>
|
|
<div className="flex items-start gap-3">
|
|
{icon && <div className="shrink-0">{icon}</div>}
|
|
<div>
|
|
<h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PageHeader
|