Typography

1import * as React from 'react'
2import { cva, type VariantProps } from 'class-variance-authority'
3import { cn } from '@/lib/utils'
4 
5const typographyVariants = cva('font-mono', {
6  variants: {
7    variant: {
8      H1: 'text-3xl font-bold uppercase tracking-[0.15em] text-[var(--color-green)] text-shadow-[var(--text-glow-green)]',
9      H2: 'text-2xl font-semibold uppercase tracking-[0.12em] text-[var(--color-green)]',
10      H3: 'text-xl font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)]',
11      H4: 'text-base font-medium uppercase tracking-widest text-[var(--text-secondary)]',
12      P: 'text-sm leading-relaxed text-[var(--text-secondary)]',
13      LEAD: 'text-base leading-relaxed text-[var(--text-secondary)] opacity-90',
14      MUTED: 'text-xs text-[var(--text-muted)]',
15      CODE: 'text-sm bg-[var(--surface-raised)] border border-[var(--border)] px-1.5 py-0.5 text-[var(--color-green)] inline-block',
16    },
17  },
18  defaultVariants: { variant: 'P' },
19})
20 
21type VariantElement = {
22  H1: 'h1'
23  H2: 'h2'
24  H3: 'h3'
25  H4: 'h4'
26  P: 'p'
27  LEAD: 'p'
28  MUTED: 'p'
29  CODE: 'code'
30}
31 
32const variantTag: VariantElement = {
33  H1: 'h1',
34  H2: 'h2',
35  H3: 'h3',
36  H4: 'h4',
37  P: 'p',
38  LEAD: 'p',
39  MUTED: 'p',
40  CODE: 'code',
41}
42 
43export interface TypographyProps
44  extends React.HTMLAttributes<HTMLElement>,
45    VariantProps<typeof typographyVariants> {
46  as?: keyof React.JSX.IntrinsicElements
47}
48 
49const Typography = React.forwardRef<HTMLElement, TypographyProps>(
50  ({ className, variant = 'P', as, children, ...props }, ref) => {
51    const Tag = (as ?? variantTag[variant as keyof VariantElement] ?? 'p') as React.ElementType
52    return (
53      <Tag
54        ref={ref}
55        className={cn(typographyVariants({ variant }), className)}
56        {...props}
57      >
58        {children}
59      </Tag>
60    )
61  }
62)
63Typography.displayName = 'Typography'
64 
65export { Typography, typographyVariants }