Migrate all 84 frontend files from the old themed/colored design to a monochrome glass-morphism design system. Pure black backgrounds, white text with opacity levels, glass-card components with backdrop-blur, and functional color reserved for status indicators only. Foundation: remap CSS variables to monochrome, simplify Tailwind config, remove theme toggle, convert brand logo/wordmark to white. Pages: all 14 pages updated. Components: all common, library, session, step-library, tree-editor, tree-preview, admin, and subscription components converted. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
26 lines
683 B
TypeScript
26 lines
683 B
TypeScript
import type { ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
description?: string
|
|
action?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function PageHeader({ title, description, action, className }: PageHeaderProps) {
|
|
return (
|
|
<div className={cn('flex items-start justify-between gap-4', className)}>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-foreground">{title}</h1>
|
|
{description && (
|
|
<p className="mt-1 text-sm text-muted-foreground">{description}</p>
|
|
)}
|
|
</div>
|
|
{action && <div className="flex-shrink-0">{action}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PageHeader
|