74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { splitProps, type Ref, ComponentProps, ValidComponent } from "solid-js";
|
|
import { Dynamic } from "solid-js/web";
|
|
|
|
export type TypographyProps<E extends ValidComponent> = {
|
|
ref?: Ref<E>;
|
|
component?: E;
|
|
class?: string;
|
|
} & ComponentProps<E>;
|
|
|
|
type TypographyKind =
|
|
| "display4"
|
|
| "display3"
|
|
| "display2"
|
|
| "display1"
|
|
| "headline"
|
|
| "title"
|
|
| "subheading"
|
|
| "body1"
|
|
| "body2"
|
|
| "caption"
|
|
| "buttonText";
|
|
|
|
export function Typography<T extends ValidComponent>(
|
|
props: { typography: TypographyKind } & TypographyProps<T>,
|
|
) {
|
|
const [managed, passthough] = splitProps(props, [
|
|
"ref",
|
|
"component",
|
|
"class",
|
|
"typography",
|
|
]);
|
|
return (
|
|
<Dynamic
|
|
ref={managed.ref}
|
|
component={managed.component ?? "span"}
|
|
class={`${managed.class || ""} ${managed.typography}`}
|
|
{...passthough}
|
|
></Dynamic>
|
|
);
|
|
}
|
|
|
|
export function Display4<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"display4"} {...props}></Typography>;
|
|
}
|
|
export function Display3<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"display3"} {...props}></Typography>;
|
|
}
|
|
export function Display2<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"display2"} {...props}></Typography>;
|
|
}
|
|
export function Display1<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"display1"} {...props}></Typography>;
|
|
}
|
|
export function Headline<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"headline"} {...props}></Typography>;
|
|
}
|
|
export function Title<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"title"} {...props}></Typography>;
|
|
}
|
|
export function Subheading<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"subheading"} {...props}></Typography>;
|
|
}
|
|
export function Body1<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"body1"} {...props}></Typography>;
|
|
}
|
|
export function Body2<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"body2"} {...props}></Typography>;
|
|
}
|
|
export function Caption<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"caption"} {...props}></Typography>;
|
|
}
|
|
export function ButtonText<E extends ValidComponent>(props: TypographyProps<E>) {
|
|
return <Typography typography={"buttonText"} {...props}></Typography>;
|
|
}
|