Stats Template

1import * as React from 'react';
2 
3// @interlace/stats-template v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/stats-template
5// What changed since: https://ds.interlace.tools/c/stats-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — StatsTemplate
10 *
11 * Public-facing metrics page. Topbar + header (title + lead) +
12 * SectionBoundary(StatGroup) + SectionBoundary(arbitrary chart/table
13 * content) + optional methodology footnote + Footer.
14 *
15 * Used by `/stats`, internal reporting dashboards, public analytics
16 * surfaces. Each loadable region streams via SectionBoundary so the
17 * hero KPIs paint while the detail table is still fetching.
18 *
19 * ## MIN_VIEWPORT — 320
20 */
21 
22import { cn } from '@/lib/utils';
23import { Container } from '@/components/ui/container';
24import { SectionBoundary } from '@/components/ui/section-boundary';
25import { Stack } from '@/components/ui/stack';
26import { Typography } from '@/components/ui/typography';
27import { Topbar } from '@/components/ui/patterns/topbar';
28import { Footer } from '@/components/ui/patterns/footer';
29import { StatGroup } from '@/components/ui/patterns/stat-group';
30import { StatCard } from '@/components/ui/patterns/stat-card';
31import { Skeleton } from '@/components/ui/skeleton';
32 
33type StatCardProps = React.ComponentProps<typeof StatCard>;
34 
35export const MIN_VIEWPORT = 320 as const;
36 
37interface StatsTemplateProps extends Omit<React.ComponentProps<'div'>, 'title'> {
38  topbar: React.ComponentProps<typeof Topbar>;
39  /** Page title. */
40  title: React.ReactNode;
41  /** One-paragraph lead under the title. */
42  lead?: React.ReactNode;
43  /** Hero KPI row (3-5 metrics). */
44  hero?: StatCardProps[];
45  /** Detail content (chart / table / etc.) — consumer-supplied. */
46  children?: React.ReactNode;
47  /**
48   * Optional methodology footnote — explains where the numbers come
49   * from. Rendered as a muted block under the body.
50   */
51  methodology?: React.ReactNode;
52  footer?: React.ComponentProps<typeof Footer>;
53}
54 
55function StatsTemplate({
56  topbar,
57  title,
58  lead,
59  hero,
60  children,
61  methodology,
62  footer,
63  className,
64  ...props
65}: StatsTemplateProps) {
66  return (
67    <div
68      data-slot="stats-template"
69      data-min-viewport={String(MIN_VIEWPORT)}
70      className={cn('bg-background text-foreground', className)}
71      {...props}
72    >
73      <Topbar {...topbar} />
74 
75      <main>
76        <Container size="content">
77// … truncated