8f2f18edf7
- Add comprehensive design token system (colors, typography, spacing) - Create 12 new UI components with Radix UI primitives - Add layout components (PageShell, StatsCard, EmptyState, DataTable) - Polish all pages with new component library - Improve accessibility with WCAG 2.1 compliance - Add dark mode support with semantic color tokens - Update 947 tests to match new UI patterns Closes #409
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import * as React from 'react'
|
|
import { cn } from '../../utils/cn'
|
|
|
|
export interface PageShellProps {
|
|
title: string
|
|
description?: string
|
|
actions?: React.ReactNode
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* PageShell - Consistent page wrapper component
|
|
*
|
|
* Provides standardized page layout with:
|
|
* - Title (h1, text-2xl font-bold)
|
|
* - Optional description (text-sm text-content-secondary)
|
|
* - Optional actions slot for buttons
|
|
* - Responsive flex layout (column on mobile, row on desktop)
|
|
* - Consistent page spacing
|
|
*/
|
|
export function PageShell({
|
|
title,
|
|
description,
|
|
actions,
|
|
children,
|
|
className,
|
|
}: PageShellProps) {
|
|
return (
|
|
<div className={cn('space-y-6', className)}>
|
|
<header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<h1 className="text-2xl font-bold text-content-primary truncate">
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="mt-1 text-sm text-content-secondary">{description}</p>
|
|
)}
|
|
</div>
|
|
{actions && (
|
|
<div className="flex shrink-0 items-center gap-3">{actions}</div>
|
|
)}
|
|
</header>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|