Dashboard Template

1import * as React from 'react';
2 
3// @interlace/dashboard-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/dashboard-template
5// What changed since: https://ds.interlace.tools/c/dashboard-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — DashboardTemplate
10 *
11 * Application dashboard surface. Topbar at top, persistent left sidebar
12 * (nav links), main content area (children). The standard
13 * "logged-in app" layout: every SaaS dashboard reaches for this shape.
14 *
15 * ## MIN_VIEWPORT — 480
16 *
17 * Below 480, the sidebar collapses (consumer wires a Sheet+Drawer for
18 * the hamburger menu). Above 480 it stays persistent.
19 */
20 
21import { cn } from '@/lib/utils';
22import { SectionBoundary } from '@/components/ui/section-boundary';
23import { Topbar } from '@/components/ui/patterns/topbar';
24import { Skeleton } from '@/components/ui/skeleton';
25import { Stack } from '@/components/ui/stack';
26 
27export const MIN_VIEWPORT = 480 as const;
28 
29interface DashboardTemplateProps extends React.ComponentProps<'div'> {
30  topbar: React.ComponentProps<typeof Topbar>;
31  /** Sidebar nav (typically a list of links). */
32  sidebar: React.ReactNode;
33  /** Page heading row (above the main content). */
34  header?: React.ReactNode;
35  /** Main content area. */
36  children: React.ReactNode;
37}
38 
39function DashboardTemplate({
40  topbar,
41  sidebar,
42  header,
43  children,
44  className,
45  ...props
46}: DashboardTemplateProps) {
47  return (
48    <div
49      data-slot="dashboard-template"
50      data-min-viewport={String(MIN_VIEWPORT)}
51      className={cn(
52        'bg-background text-foreground flex min-h-screen flex-col',
53        className,
54      )}
55      {...props}
56    >
57      <Topbar {...topbar} />
58 
59      <div className="flex flex-1">
60        <aside
61          className="border-border bg-card hidden w-60 shrink-0 border-r md:block"
62          aria-label="Primary navigation"
63        >
64          <SectionBoundary name="dashboard-sidebar" skeletonVariant="card">
65            {sidebar}
66          </SectionBoundary>
67        </aside>
68 
69        <main className="flex-1 px-lg py-lg">
70          {header ? (
71            <SectionBoundary
72              name="dashboard-header"
73              skeletonVariant="page-header"
74              className="mb-lg"
75            >
76              {header}
77            </SectionBoundary>
78          ) : null}
79          <SectionBoundary name="dashboard-body" skeletonVariant="card">
80// … truncated