61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
import React, { CSSProperties } from "react";
|
|
import "./simpleText.css";
|
|
|
|
interface CustomStyleCSS extends CSSProperties {
|
|
"--codex-color"?: string;
|
|
"--codex-color-primary"?: string;
|
|
"--codex-color-light"?: string;
|
|
"--codex-color-error"?: string;
|
|
"--codex-color-warning"?: string;
|
|
}
|
|
|
|
type Props = {
|
|
/**
|
|
* Default variant is normal
|
|
*/
|
|
variant?: "normal" | "primary" | "light" | "error" | "warning";
|
|
|
|
className?: string;
|
|
|
|
children: string;
|
|
|
|
/**
|
|
* Apply custom css variables.
|
|
* --codex-color
|
|
* --codex-color-primary
|
|
* --codex-color-light
|
|
* --codex-color-error
|
|
* --codex-color-warning
|
|
*/
|
|
style?: CustomStyleCSS;
|
|
|
|
size?: "normal" | "small";
|
|
|
|
center?: boolean;
|
|
};
|
|
|
|
export function SimpleText({
|
|
variant = "normal",
|
|
className = "",
|
|
center,
|
|
size = "normal",
|
|
style,
|
|
children,
|
|
}: Props) {
|
|
const c = `text text--${variant} ${className} ${center ? "text--center" : ""}`;
|
|
|
|
if (size === "small") {
|
|
return (
|
|
<small className={c} style={style}>
|
|
{children}
|
|
</small>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className={c} style={style}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|