UI: fix typography not beeing reponsive
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user