David Luzar
39 lines
997 B
TypeScript
39 lines
997 B
TypeScript
import "./Card.scss";
|
|
|
|
// for open-color see https://github.com/yeun/open-color/blob/master/open-color.scss
|
|
const COLOR_MAP = {
|
|
primary: {
|
|
base: "var(--color-primary)",
|
|
darker: "var(--color-primary-darker)",
|
|
darkest: "var(--color-primary-darkest)",
|
|
},
|
|
lime: {
|
|
base: "#74b816", // open-color lime[7]
|
|
darker: "#66a80f", // open-color lime[8]
|
|
darkest: "#5c940d", // open-color lime[9]
|
|
},
|
|
pink: {
|
|
base: "#d6336c", // open-color pink[7]
|
|
darker: "#c2255c", // open-color pink[8]
|
|
darkest: "#a61e4d", // open-color pink[9]
|
|
},
|
|
};
|
|
|
|
export const Card: React.FC<{
|
|
color: "primary" | "lime" | "pink";
|
|
children?: React.ReactNode;
|
|
}> = ({ children, color }) => {
|
|
return (
|
|
<div
|
|
className="Card"
|
|
style={{
|
|
["--card-color" as any]: COLOR_MAP[color].base,
|
|
["--card-color-darker" as any]: COLOR_MAP[color].darker,
|
|
["--card-color-darkest" as any]: COLOR_MAP[color].darkest,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|