jcoffey-dev
e4ad5e2c1e
- The INBUXA palette on warm surfaces, softer cards, buttons and inputs, and self-hosted Inter and Space Grotesk. - Each section's icon sits on a colored tile, colored by what the section is about. - The sidebar gets a guide line for sub-pages and a labeled Management / Settings / Account switch, and folds to a rail of tiles (remembered). - Every page has a header with its section's tile. - Fields and pages with no label of their own are spelled out in words (defaultCertificateId becomes Default certificate ID). - The dashboard greets you, and its stat cards wear colored tiles. - Unavailable live numbers are a calm note, not an error. - The cat appears in empty lists and while loading. - Chart colors work again: they were hex values wrapped in hsl().
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
/*
|
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
import type { ReactNode } from 'react';
|
|
import { IconTile } from '@/components/common/IconTile';
|
|
|
|
/**
|
|
* The top of every page: the section's tile, a title that says where you are,
|
|
* a line on what it's for, and the page's own actions on the right.
|
|
*/
|
|
export function PageHeader({
|
|
icon,
|
|
title,
|
|
subtitle,
|
|
leading,
|
|
actions,
|
|
}: {
|
|
icon?: string | null;
|
|
title: ReactNode;
|
|
subtitle?: ReactNode;
|
|
leading?: ReactNode;
|
|
actions?: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-start justify-between gap-4 pb-1">
|
|
<div className="flex min-w-0 items-center gap-3.5">
|
|
{leading}
|
|
{icon && <IconTile name={icon} size="lg" />}
|
|
<div className="min-w-0">
|
|
<h1 className="truncate text-2xl font-semibold leading-tight">{title}</h1>
|
|
{subtitle && <p className="mt-0.5 text-sm text-muted-foreground">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|