47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import type { ComponentPropsWithoutRef } from 'react';
|
|
|
|
type TypographyVariant =
|
|
| 'item-title'
|
|
| 'item-subtitle'
|
|
| 'tile-title'
|
|
| 'tile-subtitle'
|
|
| 'main-title'
|
|
| 'main-subtitle'
|
|
| 'section-title'
|
|
| 'section-subtitle'
|
|
| 'paragraph';
|
|
|
|
interface TypographyProps extends ComponentPropsWithoutRef<'div'> {
|
|
variant?: TypographyVariant;
|
|
}
|
|
|
|
const variantToElement = {
|
|
'main-title': 'h1',
|
|
'main-subtitle': 'h2',
|
|
'section-title': 'h2',
|
|
'section-subtitle': 'h3',
|
|
'item-title': 'h3',
|
|
'item-subtitle': 'p',
|
|
'tile-title': 'h4',
|
|
'tile-subtitle': 'p',
|
|
paragraph: 'p',
|
|
} as const;
|
|
|
|
const variantToClassName = {
|
|
'main-title': 'text-4xl font-extrabold text-gray-900',
|
|
'main-subtitle': 'text-lg font-medium text-gray-700',
|
|
'section-title': 'text-3xl font-extrabold text-gray-900',
|
|
'section-subtitle': 'text-lg font-extrabold text-gray-900',
|
|
'item-title': 'text-xl font-extrabold text-gray-900',
|
|
'item-subtitle': 'text-md font-medium text-gray-700',
|
|
'tile-title': 'text-sm font-medium text-gray-700',
|
|
'tile-subtitle': 'text-sm font-normal text-gray-500',
|
|
paragraph: 'text-base leading-relaxed font-normal text-gray-500',
|
|
};
|
|
|
|
export const Typography = ({ variant = 'paragraph', className, ...props }: TypographyProps) => {
|
|
const Element = variantToElement[variant];
|
|
|
|
return <Element className={clsx(variantToClassName[variant], className)} {...props} />;
|
|
};
|