UI: fix typography not beeing reponsive

This commit is contained in:
Johannes Kirschbauer
2024-12-11 11:33:04 +01:00
parent 99dd437834
commit f5fcb7b582

View File

@@ -67,38 +67,27 @@ const weightMap: Record<Weight, string> = {
interface TypographyProps<H extends Hierarchy> { interface TypographyProps<H extends Hierarchy> {
hierarchy: H; hierarchy: H;
size: AllowedSizes<H>;
children: JSX.Element;
weight?: Weight; weight?: Weight;
color?: Color; color?: Color;
inverted?: boolean; inverted?: boolean;
size: AllowedSizes<H>;
tag?: Tag; tag?: Tag;
children: JSX.Element; class?: string;
classes?: string;
} }
export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => { export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => {
const {
size,
color = "primary",
inverted,
hierarchy,
weight = "normal",
tag = "span",
children,
classes,
} = props;
return ( return (
<Dynamic <Dynamic
component={tag} component={props.tag || "span"}
class={cx( class={cx(
classes, props.class,
colorMap[color], colorMap[props.color || "primary"],
inverted && "fnt-clr--inverted", props.inverted && "fnt-clr--inverted",
sizeHierarchyMap[hierarchy][size] as string, sizeHierarchyMap[props.hierarchy][props.size] as string,
weightMap[weight], weightMap[props.weight || "normal"],
)} )}
> >
{children} {props.children}
</Dynamic> </Dynamic>
); );
}; };