Typography

1'use client';
2import { type ReactNode } from 'react';
3import Link from 'next/link';
4import { Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function TypographySection() {
29  return (
30    <SectionCard title="Typography" sourceSlug="/ui/source/ui-elements/typography">
31      <div className="space-y-6">
32        {/* Headings */}
33        <div>
34          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Headings</p>
35          <div className="space-y-2">
36            <h1 className="text-3xl font-bold text-gray-800 dark:text-white/90">Heading 1 - Bold &amp; Impactful</h1>
37            <h2 className="text-2xl font-semibold text-gray-800 dark:text-white/90">Heading 2 - Section Title</h2>
38            <h3 className="text-xl font-semibold text-gray-800 dark:text-white/90">Heading 3 - Subsection</h3>
39            <h4 className="text-lg font-medium text-gray-800 dark:text-white/90">Heading 4 - Card Title</h4>
40            <h5 className="text-base font-medium text-gray-800 dark:text-white/90">Heading 5 - Small Section</h5>
41            <h6 className="text-sm font-medium text-gray-500 dark:text-gray-400">Heading 6 - Caption</h6>
42          </div>
43        </div>
44        {/* Text Sizes */}
45        <div>
46          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Text Sizes</p>
47          <div className="space-y-1.5">
48            <p className="text-xs text-gray-600 dark:text-gray-400">Extra Small - For labels and fine print</p>
49            <p className="text-sm text-gray-600 dark:text-gray-400">Small - Body text and descriptions</p>
50            <p className="text-base text-gray-600 dark:text-gray-400">Base - Default paragraph text</p>
51            <p className="text-lg text-gray-600 dark:text-gray-400">Large - Emphasized content</p>
52            <p className="text-xl text-gray-800 dark:text-white/90">Extra Large - Featured content</p>
53          </div>
54        </div>
55        {/* Font Weights */}
56        <div>
57          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Font Weights</p>
58          <div className="flex flex-wrap gap-4">
59            <span className="font-light text-gray-600 dark:text-gray-400">Light</span>
60            <span className="font-normal text-gray-600 dark:text-gray-400">Regular</span>
61            <span className="font-medium text-gray-800 dark:text-white/90">Medium</span>
62            <span className="font-semibold text-gray-800 dark:text-white/90">Semibold</span>
63            <span className="font-bold text-gray-800 dark:text-white/90">Bold</span>
64            <span className="font-extrabold text-gray-800 dark:text-white/90">Extra Bold</span>
65          </div>
66        </div>
67        {/* Lists */}
68        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
69          <div>
70            <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Unordered List</p>
71            <ul className="ml-4 list-disc space-y-1 text-sm text-gray-600 dark:text-gray-400">
72              <li>Dashboard analytics overview</li>
73              <li>Real-time data visualization</li>
74              <li>Customizable widget layouts</li>
75              <li>Multi-language support</li>
76            </ul>
77          </div>
78          <div>
79            <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Ordered List</p>
80            <ol className="ml-4 list-decimal space-y-1 text-sm text-gray-600 dark:text-gray-400">
81              <li>Install the package</li>
82              <li>Configure your theme</li>
83              <li>Build your components</li>
84              <li>Deploy to production</li>
85            </ol>
86          </div>
87        </div>
88      </div>
89    </SectionCard>
90  );
91}