114 lines
2.3 KiB
TypeScript
114 lines
2.3 KiB
TypeScript
import React, { JSX } from "react";
|
|
import clsx from "clsx";
|
|
|
|
type Variant =
|
|
| "h1"
|
|
| "h2"
|
|
| "h3"
|
|
| "h4"
|
|
| "h5"
|
|
| "h6"
|
|
| "subtitle1"
|
|
| "subtitle2"
|
|
| "body1"
|
|
| "body2"
|
|
| "caption"
|
|
| "overline";
|
|
|
|
type Align = "left" | "center" | "right" | "justify";
|
|
|
|
interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
|
|
variant?: Variant;
|
|
align?: Align;
|
|
color?: string;
|
|
fontWeight?: "light" | "normal" | "medium" | "semibold" | "bold";
|
|
gutterBottom?: boolean;
|
|
noWrap?: boolean;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
component?: React.ElementType;
|
|
}
|
|
|
|
const variantStyles: Record<Variant, string> = {
|
|
h1: "text-5xl",
|
|
h2: "text-4xl",
|
|
h3: "text-3xl",
|
|
h4: "text-2xl",
|
|
h5: "text-xl",
|
|
h6: "text-lg",
|
|
subtitle1: "text-base",
|
|
subtitle2: "text-sm",
|
|
body1: "text-base",
|
|
body2: "text-sm",
|
|
caption: "text-xs",
|
|
overline: "text-[10px] uppercase tracking-widest",
|
|
};
|
|
|
|
const variantToElement: Record<Variant, keyof JSX.IntrinsicElements> = {
|
|
h1: "h1",
|
|
h2: "h2",
|
|
h3: "h3",
|
|
h4: "h4",
|
|
h5: "h5",
|
|
h6: "h6",
|
|
subtitle1: "h6",
|
|
subtitle2: "h6",
|
|
body1: "p",
|
|
body2: "p",
|
|
caption: "span",
|
|
overline: "span",
|
|
};
|
|
|
|
const Typography: React.FC<TypographyProps> = ({
|
|
variant = "body1",
|
|
align = "left",
|
|
color = "",
|
|
fontWeight = "normal",
|
|
gutterBottom = false,
|
|
noWrap = false,
|
|
className,
|
|
component,
|
|
children,
|
|
...props
|
|
}) => {
|
|
const Tag = (component || variantToElement[variant]) as React.ElementType;
|
|
|
|
const getColors = () => {
|
|
if (color) {
|
|
return color;
|
|
} else return "text-primary-900 dark:text-dark-100";
|
|
};
|
|
|
|
return (
|
|
<Tag
|
|
className={clsx(
|
|
"flex items-center gap-1",
|
|
variantStyles[variant],
|
|
color,
|
|
getColors(),
|
|
{
|
|
"mb-2": gutterBottom,
|
|
truncate: noWrap,
|
|
"text-left": align === "right",
|
|
"text-center": align === "center",
|
|
"text-right": align === "left",
|
|
"text-justify": align === "justify",
|
|
"font-light": fontWeight === "light",
|
|
"font-normal": fontWeight === "normal",
|
|
"font-medium": fontWeight === "medium",
|
|
"font-semibold": fontWeight === "semibold",
|
|
"font-bold": fontWeight === "bold",
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
};
|
|
|
|
export default Typography;
|
|
|
|
|