Card.tsx 710 B

12345678910111213141516171819202122232425262728
  1. import OpenColor from "open-color";
  2. import "./Card.scss";
  3. export const Card: React.FC<{
  4. color: keyof OpenColor | "primary";
  5. children?: React.ReactNode;
  6. }> = ({ children, color }) => {
  7. return (
  8. <div
  9. className="Card"
  10. style={{
  11. ["--card-color" as any]:
  12. color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
  13. ["--card-color-darker" as any]:
  14. color === "primary"
  15. ? "var(--color-primary-darker)"
  16. : OpenColor[color][8],
  17. ["--card-color-darkest" as any]:
  18. color === "primary"
  19. ? "var(--color-primary-darkest)"
  20. : OpenColor[color][9],
  21. }}
  22. >
  23. {children}
  24. </div>
  25. );
  26. };