1'use client';
2
3import { Typography } from '@/components/ui/typography';
4
5export function Default() {
6  return (
7    <Typography variant="p">
8      This is a default paragraph typography rendering. It uses the default font size, line height,
9      and paragraph spacing.
10    </Typography>
11  );
12}

1'use client';
2
3import { Typography } from '@/components/ui/typography';
4
5export function Default() {
6  return (
7    <Typography variant="p">
8      This is a default paragraph typography rendering. It uses the default font size, line height,
9      and paragraph spacing.
10    </Typography>
11  );
12}

1'use client';
2
3import { Typography } from '@/components/ui/typography';
4
5const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
6
7export function Headings() {
8  return (
9    <div className="flex w-full flex-col gap-4">
10      {headings.map((heading) => (
11        <Typography key={heading} variant={heading}>
12          Heading {heading.replace('h', '')}
13        </Typography>
14      ))}
15    </div>
16  );
17}

1'use client';
2
3import { Typography } from '@/components/ui/typography';
4
5const items = [
6  {
7    label: 'Lead Text',
8    variant: 'lead' as const,
9    content: 'A tall paragraph text style designed to introduce an article or section.',
10  },
11  {
12    label: 'Large Text',
13    variant: 'large' as const,
14    content: 'Slightly larger copy designed for subheaders, callouts, or featured content.',
15  },
16  {
17    label: 'Small & Muted Text',
18    variant: 'muted' as const,
19    content: 'De-emphasized descriptive text, perfect for captions or legal copy.',
20  },
21];
22
23export function LeadMuted() {
24  return (
25    <div className="flex w-full flex-col gap-4">
26      {items.map(({ label, variant, content }) => (
27        <div key={variant}>
28          <Typography
29            variant="small"
30            className="text-primary mb-1 block font-bold tracking-wider uppercase"
31          >
32            {label}
33          </Typography>
34          <Typography variant={variant}>{content}</Typography>
35        </div>
36      ))}
37    </div>
38  );
39}

1'use client';
2
3import { Typography } from '@/components/ui/typography';
4
5const examples = [
6  {
7    label: 'Paragraph rendered as Span',
8    element: (
9      <Typography as="span" variant="p" className="bg-secondary/20 rounded p-2">
10        This uses paragraph styling but is rendered as a inline `span` tag in the DOM.
11      </Typography>
12    ),
13  },
14  {
15    label: 'Heading rendered as Div',
16    element: (
17      <Typography as="div" variant="h3">
18        This looks like an H3, but it&apos;s actually a `div` element.
19      </Typography>
20    ),
21  },
22  {
23    label: 'Code block rendering',
24    element: (
25      <Typography variant="code">
26        console.log(&quot;This automatically renders as a code tag by variant inference&quot;);
27      </Typography>
28    ),
29  },
30];
31
32export function CustomTag() {
33  return (
34    <div className="flex w-full flex-col gap-6">
35      {examples.map(({ label, element }) => (
36        <div key={label}>
37          <Typography
38            variant="small"
39            className="text-primary mb-1 block font-bold tracking-wider uppercase"
40          >
41            {label}
42          </Typography>
43          {element}
44        </div>
45      ))}
46    </div>
47  );
48}