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
5export function Headings() {
6  return (
7    <div className="flex w-full flex-col gap-4">
8      <Typography variant="h1">Heading 1</Typography>
9      <Typography variant="h2">Heading 2</Typography>
10      <Typography variant="h3">Heading 3</Typography>
11      <Typography variant="h4">Heading 4</Typography>
12      <Typography variant="h5">Heading 5</Typography>
13      <Typography variant="h6">Heading 6</Typography>
14    </div>
15  );
16}

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

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