Settings Template

1import * as React from 'react';
2 
3// @interlace/settings-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/settings-template
5// What changed since: https://ds.interlace.tools/c/settings-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — SettingsTemplate
10 *
11 * Account / app settings surface. Topbar + left tab-rail (sections) +
12 * main content area (rendered section). Server-friendly; the active
13 * section is driven by the consumer's routing (each section is a route).
14 *
15 * ## MIN_VIEWPORT — 480
16 *
17 * Below 480, the tab-rail becomes a horizontal scrolling row above the
18 * content.
19 */
20 
21import { cn } from '@/lib/utils';
22import { Container } from '@/components/ui/container';
23import { SectionBoundary } from '@/components/ui/section-boundary';
24import { Stack } from '@/components/ui/stack';
25import { Typography } from '@/components/ui/typography';
26import { Topbar } from '@/components/ui/patterns/topbar';
27import { Skeleton } from '@/components/ui/skeleton';
28 
29export const MIN_VIEWPORT = 480 as const;
30 
31interface SettingsSection {
32  id: string;
33  label: React.ReactNode;
34  href: string;
35}
36 
37interface SettingsTemplateProps extends Omit<React.ComponentProps<'div'>, 'title'> {
38  topbar: React.ComponentProps<typeof Topbar>;
39  /** Page title (rendered above the tab rail). */
40  title?: React.ReactNode;
41  /** Section list shown in the rail. */
42  sections: SettingsSection[];
43  /** ID of the currently-active section (matches `SettingsSection.id`). */
44  activeSection: string;
45  /** Main content (the active section's form / settings). */
46  children: React.ReactNode;
47}
48 
49function SettingsTemplate({
50  topbar,
51  title = 'Settings',
52  sections,
53  activeSection,
54  children,
55  className,
56  ...props
57}: SettingsTemplateProps) {
58  return (
59    <div
60      data-slot="settings-template"
61      data-min-viewport={String(MIN_VIEWPORT)}
62      className={cn(
63        'bg-background text-foreground flex min-h-screen flex-col',
64        className,
65      )}
66      {...props}
67    >
68      <Topbar {...topbar} />
69 
70      <main className="flex-1 py-xl">
71        <Container size="content">
72          <Stack gap="lg">
73            <Typography variant="h2" as="h1" className="text-balance">
74              {title}
75            </Typography>
76 
77            <div className="flex flex-col gap-lg md:flex-row">
78              <nav
79                aria-label="Settings sections"
80// … truncated