Beatrice Dellacà
f1c7e245aa
All checks were successful
continuous-integration/drone/push Build is passing
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { ElementType, ReactNode } from 'react';
|
|
|
|
type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code';
|
|
|
|
type LabelProps<T extends ElementType> = {
|
|
variant?: LabelVariant;
|
|
as?: T;
|
|
className?: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const variantClassMap: Record<LabelVariant, string> = {
|
|
h1: 'ui-title text-3xl font-bold',
|
|
h2: 'ui-title text-2xl font-semibold',
|
|
h3: 'ui-title text-xl font-semibold',
|
|
h4: 'ui-title text-base font-semibold',
|
|
body: 'ui-body-primary text-sm',
|
|
body2: 'ui-body-secondary text-sm',
|
|
caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
|
|
error: 'ui-error text-sm',
|
|
code: 'ui-code text-sm font-mono',
|
|
};
|
|
|
|
const variantTagMap: Record<LabelVariant, ElementType> = {
|
|
h1: 'h1',
|
|
h2: 'h2',
|
|
h3: 'h3',
|
|
h4: 'h3',
|
|
body: 'p',
|
|
body2: 'p',
|
|
caption: 'p',
|
|
error: 'p',
|
|
code: 'code',
|
|
};
|
|
|
|
export function Label<T extends ElementType = 'p'>({
|
|
variant = 'body',
|
|
as,
|
|
className = '',
|
|
children,
|
|
}: Readonly<LabelProps<T>>) {
|
|
const Component = as ?? variantTagMap[variant];
|
|
const classes = `${variantClassMap[variant]} ${className}`.trim();
|
|
|
|
return <Component className={classes}>{children}</Component>;
|
|
}
|