83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
|
|
interface TypographyProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const H1: React.FC<TypographyProps> = ({ children, className = "" }) => (
|
|
<h1
|
|
className={`text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[1.1] ${className}`}
|
|
>
|
|
{children}
|
|
</h1>
|
|
);
|
|
|
|
export const H2: React.FC<TypographyProps> = ({ children, className = "" }) => (
|
|
<h2
|
|
className={`text-xl md:text-5xl font-bold text-slate-900 tracking-tighter leading-tight ${className}`}
|
|
>
|
|
{children}
|
|
</h2>
|
|
);
|
|
|
|
export const H3: React.FC<TypographyProps> = ({ children, className = "" }) => (
|
|
<h3
|
|
className={`text-lg md:text-4xl font-bold text-slate-900 tracking-tight leading-tight ${className}`}
|
|
>
|
|
{children}
|
|
</h3>
|
|
);
|
|
|
|
export const H4: React.FC<TypographyProps> = ({ children, className = "" }) => (
|
|
<h4
|
|
className={`text-base md:text-2xl font-bold text-slate-900 tracking-tight ${className}`}
|
|
>
|
|
{children}
|
|
</h4>
|
|
);
|
|
|
|
export const LeadText: React.FC<TypographyProps> = ({
|
|
children,
|
|
className = "",
|
|
}) => (
|
|
<div
|
|
className={`text-sm md:text-xl font-serif italic text-slate-500 leading-relaxed ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const BodyText: React.FC<TypographyProps> = ({
|
|
children,
|
|
className = "",
|
|
}) => (
|
|
<div
|
|
className={`text-sm md:text-base text-slate-500 leading-relaxed ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
export const Label: React.FC<TypographyProps> = ({
|
|
children,
|
|
className = "",
|
|
}) => (
|
|
<span
|
|
className={`text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400 block ${className}`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
export const MonoLabel: React.FC<TypographyProps> = ({
|
|
children,
|
|
className = "",
|
|
}) => (
|
|
<span
|
|
className={`text-[10px] font-mono uppercase tracking-[0.2em] text-slate-400 block ${className}`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|