-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathText.tsx
More file actions
55 lines (46 loc) · 1.17 KB
/
Text.tsx
File metadata and controls
55 lines (46 loc) · 1.17 KB
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
import { Color, ColorShades, textColors } from "@/config/colors";
import { FontWeights, fontWeights } from "@/config/typography";
import { HTMLAttributes, createElement } from "react";
import { twMerge } from "tailwind-merge";
type TextProps = HTMLAttributes<HTMLElement> & {
children: React.ReactNode;
type: "h1" | "h2" | "h3" | "h4" | "h5" | "span" | "p";
weight?: FontWeights;
color?: Color;
shade?: ColorShades;
breakpoint?: number;
maxCharacters?: number;
};
export function Text({
children,
type,
weight = "normal",
color = "dark",
shade = 500,
breakpoint = 0,
maxCharacters,
className,
...props
}: TextProps) {
return createElement(
type,
{
...props,
className: twMerge(textColors[color][shade], fontWeights(weight), className),
style: {
...(breakpoint > 0 && {
WebkitLineClamp: breakpoint,
lineHeight: 1.2,
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
}),
...(maxCharacters != undefined && {
maxWidth: `${maxCharacters}ch`,
}),
},
},
children,
);
}