trigger.dev/apps/webapp/app/components/primitives/Paragraph.tsx at aeea73606ff057a9f5bce5a2dc2d096f889cc21c · triggerdotdev/trigger.dev · 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
97
98
99
100
101
102
103
104
105
106
107
import { cn } from "~/utils/cn";

const paragraphVariants = {
  base: {
    text: "font-sans text-base font-normal text-text-dimmed",
    spacing: "mb-3",
  },
  "base/bright": {
    text: "font-sans text-base font-normal text-text-bright",
    spacing: "mb-3",
  },
  small: {
    text: "font-sans text-sm font-normal text-text-dimmed",
    spacing: "mb-2",
  },
  "small/bright": {
    text: "font-sans text-sm font-normal text-text-bright",
    spacing: "mb-2",
  },
  "small/dimmed": {
    text: "font-sans text-sm font-normal text-text-dimmed",
    spacing: "mb-2",
  },
  "extra-small": {
    text: "font-sans text-xs font-normal text-text-dimmed",
    spacing: "mb-1.5",
  },
  "extra-small/bright": {
    text: "font-sans text-xs font-normal text-text-bright",
    spacing: "mb-1.5",
  },
  "extra-small/dimmed": {
    text: "font-sans text-xs font-normal text-text-dimmed",
    spacing: "mb-1.5",
  },
  "extra-small/dimmed/mono": {
    text: "font-mono text-xs font-normal text-text-dimmed",
    spacing: "mb-1.5",
  },
  "extra-small/mono": {
    text: "font-mono text-xs font-normal text-text-dimmed",
    spacing: "mb-1.5",
  },
  "extra-small/bright/mono": {
    text: "font-mono text-xs text-text-bright",
    spacing: "mb-1.5",
  },
  "extra-small/caps": {
    text: "font-sans text-xs uppercase tracking-wider font-normal text-text-dimmed",
    spacing: "mb-1.5",
  },
  "extra-small/bright/caps": {
    text: "font-sans text-xs uppercase tracking-wider font-normal text-text-bright",
    spacing: "mb-1.5",
  },
  "extra-extra-small": {
    text: "font-sans text-xxs font-normal text-text-dimmed",
    spacing: "mb-1",
  },
  "extra-extra-small/bright": {
    text: "font-sans text-xxs font-normal text-text-bright",
    spacing: "mb-1",
  },

  "extra-extra-small/caps": {
    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-dimmed",
    spacing: "mb-1",
  },
  "extra-extra-small/bright/caps": {
    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-bright",
    spacing: "mb-1",
  },
  "extra-extra-small/dimmed/caps": {
    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-dimmed",
    spacing: "mb-1",
  },
};

export type ParagraphVariant = keyof typeof paragraphVariants;

type ParagraphProps = {
  variant?: ParagraphVariant;
  className?: string;
  spacing?: boolean;
  children: React.ReactNode;
} & React.HTMLAttributes<HTMLParagraphElement>;

export function Paragraph({
  variant = "base",
  className,
  spacing = false,
  children,
  ...props
}: ParagraphProps) {
  return (
    <p
      className={cn(
        paragraphVariants[variant].text,
        spacing === true && paragraphVariants[variant].spacing,
        className
      )}
      {...props}
    >
      {children}
    </p>
  );
}