87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
import classNames from 'classnames';
|
|
interface Props {
|
|
level: 1 | 2 | 3 | 4;
|
|
small?: boolean;
|
|
bold?: boolean;
|
|
soft?: boolean;
|
|
disabled?: boolean;
|
|
margin?: boolean;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Title(props: Props) {
|
|
const {
|
|
level,
|
|
children,
|
|
className = '',
|
|
bold = false,
|
|
small = false,
|
|
soft = false,
|
|
disabled = false,
|
|
margin = true,
|
|
} = props;
|
|
|
|
const opacity = disabled ? 'opacity-25' : soft ? 'opacity-75' : undefined;
|
|
|
|
const commonClassNames = classNames(
|
|
disabled && 'select-none',
|
|
margin && 'mb-2',
|
|
opacity,
|
|
className,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{level === 1 && (
|
|
<h1
|
|
className={classNames(
|
|
'font-raleway',
|
|
small ? 'text-xl' : 'text-twoxl',
|
|
bold ? 'font-bold' : 'font-semibold',
|
|
commonClassNames,
|
|
)}
|
|
>
|
|
{children}
|
|
</h1>
|
|
)}
|
|
{level === 2 && (
|
|
<h2
|
|
className={classNames(
|
|
'font-raleway',
|
|
small ? 'text-lg' : 'text-xl',
|
|
bold ? 'font-bold' : 'font-light',
|
|
commonClassNames,
|
|
)}
|
|
>
|
|
{children}
|
|
</h2>
|
|
)}
|
|
{level === 3 && (
|
|
<h3
|
|
className={classNames(
|
|
'font-raleway',
|
|
small ? 'text-base' : 'text-lg',
|
|
bold ? 'font-bold' : 'font-light',
|
|
commonClassNames,
|
|
)}
|
|
>
|
|
{children}
|
|
</h3>
|
|
)}
|
|
{level === 4 && (
|
|
<h4
|
|
className={classNames(
|
|
'font-raleway',
|
|
small ? 'text-sm' : 'text-base',
|
|
bold ? 'font-bold' : 'font-light',
|
|
commonClassNames,
|
|
)}
|
|
>
|
|
{children}
|
|
</h4>
|
|
)}
|
|
</>
|
|
);
|
|
}
|