tracker-tracker/src/components/ui/Typography.tsx at development · patrickdundas/tracker-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// src/components/ui/Typography.tsx
//
// Functions: H1, H2, H3, Subheader, Paragraph, Subtext, SlotLabel, DataCell

import clsx from "clsx"
import type { HTMLAttributes } from "react"

interface TypographyProps extends HTMLAttributes<HTMLElement> {
  as?: keyof HTMLElementTagNameMap
}

function H1({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h1 className={clsx("text-lg font-sans font-bold text-primary", className)} {...props}>
      {children}
    </h1>
  )
}

function H2({ className, children, id, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h2
      id={id}
      className={clsx(
        "text-xs font-sans font-medium text-secondary uppercase tracking-wider",
        className
      )}
      {...props}
    >
      {children}
    </h2>
  )
}

function H3({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h3 className={clsx("text-sm font-sans font-semibold text-primary", className)} {...props}>
      {children}
    </h3>
  )
}

function Subheader({ as: Tag = "span", className, children, ...props }: TypographyProps) {
  return (
    <Tag className={clsx("text-xs font-sans font-medium text-secondary", className)} {...props}>
      {children}
    </Tag>
  )
}

function Paragraph({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={clsx("text-xs font-sans text-tertiary leading-relaxed", className)} {...props}>
      {children}
    </p>
  )
}

/** Fine print: warnings, disclaimers, footnotes */
function Subtext({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={clsx("text-xs font-sans text-muted leading-relaxed", className)} {...props}>
      {children}
    </p>
  )
}

/** uppercase micro text for slot names, field labels in dense UI */
function SlotLabel({
  label,
  className,
  children,
  ...props
}: { label?: string } & HTMLAttributes<HTMLSpanElement>) {
  return (
    <span className={clsx("slot-label", className)} {...props}>
      {label ?? children}
    </span>
  )
}

/** Mono tabular-nums value for leaderboard/table cells */
function DataCell({
  value,
  className,
  children,
  ...props
}: { value?: string } & HTMLAttributes<HTMLSpanElement>) {
  return (
    <span className={clsx("tabular-cell", className)} {...props}>
      {value ?? children}
    </span>
  )
}

export { DataCell, H1, H2, H3, Paragraph, SlotLabel, Subheader, Subtext }