40 lines
848 B
TypeScript
40 lines
848 B
TypeScript
import clsx from "clsx";
|
|
import React from "react";
|
|
|
|
type TitleSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
|
|
interface Props {
|
|
size?: TitleSize;
|
|
className?: string;
|
|
text: string;
|
|
}
|
|
|
|
export const Title: React.FC<Props> = ({ text, size = "sm", className }) => {
|
|
const mapTagBySize: Record<TitleSize, React.ElementType> = {
|
|
xs: "h5",
|
|
sm: "h4",
|
|
md: "h3",
|
|
lg: "h2",
|
|
xl: "h1",
|
|
"2xl": "h1",
|
|
};
|
|
|
|
const mapClassNameBySize: Record<TitleSize, string> = {
|
|
xs: "text-[16px]",
|
|
sm: "text-[22px]",
|
|
md: "text-[26px]",
|
|
lg: "text-[32px]",
|
|
xl: "text-[40px]",
|
|
"2xl": "text-[48px]",
|
|
};
|
|
|
|
const Tag = mapTagBySize[size] || "h4";
|
|
const sizeClassName = mapClassNameBySize[size] || "text-[22px]";
|
|
|
|
return React.createElement(
|
|
Tag,
|
|
{ className: clsx(sizeClassName, className) },
|
|
text
|
|
);
|
|
};
|