placeholder.tsx30 lines · main
1/**
2 * Shared "coming soon" stub for cockpit sections built in later phases.
3 * Server-safe (no client hooks) — gated by the (admin) layout.
4 *
5 * `icon` keeps the placeholder visually consistent with the live cockpit
6 * pages, which all lead their header with the same animated icon used for
7 * that section in the nav.
8 */
9export function CockpitPlaceholder({
10 title,
11 blurb,
12 icon,
13}: {
14 title: string;
15 blurb: string;
16 icon?: React.ReactNode;
17}) {
18 return (
19 <section className="flex flex-col gap-3">
20 <div className="flex items-center gap-2">
21 {icon ? <span className="text-[var(--color-primary)]">{icon}</span> : null}
22 <h1 className="font-mono text-xl tracking-tight">{title}</h1>
23 <span className="inline-flex items-center rounded-[var(--radius-full)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)]">
24 coming soon
25 </span>
26 </div>
27 <p className="max-w-prose font-mono text-sm text-[var(--color-text-muted)]">{blurb}</p>
28 </section>
29 );
30}