Tag Template

1import * as React from 'react';
2 
3// @interlace/tag-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/tag-template
5// What changed since: https://ds.interlace.tools/c/tag-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — TagTemplate
10 *
11 * Tag-filtered article index. Used by `/tags/[slug]` routes on a blog
12 * to show "all articles tagged #typescript" etc. Shows a header
13 * ("Tagged: #typescript") then an ArticleListGrid of matching posts.
14 *
15 * ## MIN_VIEWPORT — 320
16 */
17 
18import { cn } from '@/lib/utils';
19import { Container } from '@/components/ui/container';
20import { SectionBoundary } from '@/components/ui/section-boundary';
21import { Stack } from '@/components/ui/stack';
22import { Tag } from '@/components/ui/tag';
23import { Typography } from '@/components/ui/typography';
24import { Topbar } from '@/components/ui/patterns/topbar';
25import { Footer } from '@/components/ui/patterns/footer';
26import { Skeleton } from '@/components/ui/skeleton';
27 
28export const MIN_VIEWPORT = 320 as const;
29 
30interface TagTemplateProps extends Omit<React.ComponentProps<'div'>, 'title'> {
31  topbar: React.ComponentProps<typeof Topbar>;
32  /** Tag name (rendered in the h1). */
33  tagName: string;
34  /** Optional URL for the tag chip in the header. */
35  tagHref?: string;
36  /** Optional one-line lead under the title. */
37  lead?: React.ReactNode;
38  /** Article grid — typically <ArticleListGrid posts={...} />. */
39  articles: React.ReactNode;
40  /** Optional sibling-tag cluster for navigation. */
41  relatedTags?: React.ReactNode;
42  footer?: React.ComponentProps<typeof Footer>;
43}
44 
45function TagTemplate({
46  topbar,
47  tagName,
48  tagHref,
49  lead,
50  articles,
51  relatedTags,
52  footer,
53  className,
54  ...props
55}: TagTemplateProps) {
56  return (
57    <div
58      data-slot="tag-template"
59      data-min-viewport={String(MIN_VIEWPORT)}
60      data-tag={tagName}
61      className={cn('bg-background text-foreground', className)}
62      {...props}
63    >
64      <Topbar {...topbar} />
65 
66      <main>
67        <Container size="content">
68          <Stack gap="xl" className="py-xl">
69            <SectionBoundary name="tag-header" skeletonVariant="page-header">
70              <Stack gap="sm">
71                <Typography variant="h1" as="h1" className="text-balance">
72                  Tagged:{' '}
73                  <Tag href={tagHref ?? '#'} tone="primary">
74                    #{tagName}
75                  </Tag>
76// … truncated