34 lines
893 B
TypeScript
34 lines
893 B
TypeScript
|
import { DetailedHTMLProps, HTMLAttributes } from "react";
|
||
|
|
import { twMerge } from "tailwind-merge";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* # Span element
|
||
|
|
* @className twui-span
|
||
|
|
*/
|
||
|
|
export default function Span({
|
||
|
|
size,
|
||
|
|
variant,
|
||
|
|
...props
|
||
|
|
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
|
||
|
|
size?: "normal" | "small" | "smaller" | "large" | "larger";
|
||
|
|
variant?: "normal" | "faded";
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
{...props}
|
||
|
|
className={twMerge(
|
||
|
|
"text-base",
|
||
|
|
size == "small" && "text-sm",
|
||
|
|
size == "smaller" && "text-xs",
|
||
|
|
size == "large" && "text-lg",
|
||
|
|
size == "larger" && "text-xl",
|
||
|
|
variant == "faded" && "opacity-50",
|
||
|
|
"twui-span",
|
||
|
|
props.className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|