Error Template

1import * as React from 'react';
2 
3// @interlace/error-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/error-template
5// What changed since: https://ds.interlace.tools/c/error-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — ErrorTemplate
10 *
11 * Full-page error surface — 404 / 500 / 503 / generic. Centred column
12 * with the status code + title + description + action buttons (back home,
13 * contact support, retry).
14 *
15 * One template, four variants — pick via `variant`. Pass `actions` for
16 * the CTA cluster.
17 *
18 * ## MIN_VIEWPORT — 320
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 { Skeleton } from '@/components/ui/skeleton';
27 
28export const MIN_VIEWPORT = 320 as const;
29 
30type ErrorVariant = '404' | '500' | '503' | 'generic';
31 
32interface ErrorTemplateProps extends Omit<React.ComponentProps<'main'>, 'title'> {
33  variant?: ErrorVariant;
34  /** Override the default status code displayed. */
35  statusCode?: React.ReactNode;
36  /** Title. Defaults per `variant`. */
37  title?: React.ReactNode;
38  /** Description. Defaults per `variant`. */
39  description?: React.ReactNode;
40  /** Action button row (typically Back home + Contact). */
41  actions?: React.ReactNode;
42}
43 
44const DEFAULTS: Record<
45  ErrorVariant,
46  { code: string; title: string; description: string }
47> = {
48  '404': {
49    code: '404',
50    title: 'Page not found',
51    description:
52      "We couldn't find the page you were looking for. It may have moved, or never existed.",
53  },
54  '500': {
55    code: '500',
56    title: 'Something went wrong',
57    description:
58      'An unexpected error occurred on our end. Try again, and if it keeps happening, let us know.',
59  },
60  '503': {
61    code: '503',
62    title: 'We\'ll be right back',
63    description:
64      'The site is undergoing maintenance. Please check back in a few minutes.',
65  },
66  generic: {
67    code: '!',
68    title: 'Something went wrong',
69    description: 'An unexpected error occurred.',
70  },
71};
72 
73function ErrorTemplate({
74  variant = '404',
75  statusCode,
76  title,
77  description,
78  actions,
79  className,
80  ...props
81}: ErrorTemplateProps) {
82  const fallback = DEFAULTS[variant];
83  return (
84    <main
85      data-slot="error-template"
86// … truncated