Claude
a24c1b821c
Ports the shell and Aperçu screen from the Claude Design export, and builds the week grid from the design system's grid specification. The theme is applied by a nonced inline script before first paint. Without it the page renders light and then swaps, which is a white flash for anyone working in dark. The nonce our CSP already emits is what makes an inline script possible at all. Demo data lives in src/lib/demo behind a README stating it is fictional and replaceable. Screens import from there and nowhere else, so the directory can be deleted wholesale once real queries land. Weekend columns are shaded because in retail those are the days that carry counterparts — mayor-authorised Sundays and their compensatory rest — and scheduling one by accident is the failure worth preventing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cr9dkEHwbDgkWPnyGj1Rjv
29 lines
782 B
TypeScript
29 lines
782 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface PageHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-[-0.018em]">{title}</h1>
|
|
{subtitle ? (
|
|
<p className="mt-1 text-sm text-ink-2">{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
<span className="flex-1" />
|
|
{actions ? <div className="flex items-center gap-2">{actions}</div> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PageBody({ children }: { children: ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col gap-5 px-6 pt-5 pb-16">{children}</div>
|
|
);
|
|
}
|