Author Template

1import * as React from 'react';
2 
3// @interlace/author-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/author-template
5// What changed since: https://ds.interlace.tools/c/author-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — AuthorTemplate
10 *
11 * Author profile page — bio header + their articles grid. Used by
12 * `/authors/[slug]` routes on a blog. The bio header is a multi-part
13 * card (avatar + name + role + bio + social links); the grid uses
14 * ArticleListGrid for the article list.
15 *
16 * ## MIN_VIEWPORT — 320
17 */
18 
19import { cn } from '@/lib/utils';
20import { Container } from '@/components/ui/container';
21import { SectionBoundary } from '@/components/ui/section-boundary';
22import { Stack } from '@/components/ui/stack';
23import { Topbar } from '@/components/ui/patterns/topbar';
24import { Footer } from '@/components/ui/patterns/footer';
25import { Skeleton } from '@/components/ui/skeleton';
26 
27export const MIN_VIEWPORT = 320 as const;
28 
29interface AuthorTemplateProps extends React.ComponentProps<'div'> {
30  topbar: React.ComponentProps<typeof Topbar>;
31  /**
32   * Author bio header — consumer-supplied. Typically renders
33   * <AuthorByline /> + a paragraph + social links.
34   */
35  bio: React.ReactNode;
36  /** Article grid — typically <ArticleListGrid title="By Ofri" posts={...} />. */
37  articles: React.ReactNode;
38  footer?: React.ComponentProps<typeof Footer>;
39}
40 
41function AuthorTemplate({
42  topbar,
43  bio,
44  articles,
45  footer,
46  className,
47  ...props
48}: AuthorTemplateProps) {
49  return (
50    <div
51      data-slot="author-template"
52      data-min-viewport={String(MIN_VIEWPORT)}
53      className={cn('bg-background text-foreground', className)}
54      {...props}
55    >
56      <Topbar {...topbar} />
57 
58      <main>
59        <Container size="prose">
60          <Stack gap="xl" className="py-xl">
61            <SectionBoundary name="author-bio" skeletonVariant="author-byline">
62              {bio}
63            </SectionBoundary>
64 
65            <SectionBoundary
66              name="author-articles"
67              skeletonVariant="article-card"
68            >
69              {articles}
70            </SectionBoundary>
71          </Stack>
72        </Container>
73      </main>
74 
75      {footer ? <Footer {...footer} /> : null}
76    </div>
77  );
78}
79AuthorTemplate.displayName = 'AuthorTemplate';
80 
81/**
82 * Page-level loading state — the full-page silhouette of
83// … truncated