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().
21 lines
806 B
TypeScript
21 lines
806 B
TypeScript
/*
|
|
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
import type { ReactNode } from 'react';
|
|
import inbuxaMark from '@/assets/inbuxa-mark.png';
|
|
|
|
/** Nothing to show yet: the cat, a line saying so, and what to do about it. */
|
|
export function EmptyState({ title, hint, action }: { title: ReactNode; hint?: ReactNode; action?: ReactNode }) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-2 px-6 py-12 text-center">
|
|
<img src={inbuxaMark} alt="" className="mb-1 h-14 w-auto opacity-90 grayscale-[15%]" />
|
|
<p className="font-display text-base font-semibold text-foreground">{title}</p>
|
|
{hint && <p className="max-w-sm text-sm text-muted-foreground">{hint}</p>}
|
|
{action && <div className="mt-2">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|