FrontEnd/src/components/Card.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { ComponentPropsWithoutRef, Ref } from "react";
import classNames from "classnames";

import { ThemeColor } from "./common";

import "./Card.css";

interface CardProps extends ComponentPropsWithoutRef<"div"> {
  containerRef?: Ref<HTMLDivElement>;
  color?: ThemeColor;
  border?: "color" | "none";
  background?: "color" | "solid" | "grayscale" | "none";
}

export default function Card({
  color,
  background,
  border,
  className,
  children,
  containerRef,
  ...otherProps
}: CardProps) {
  return (
    <div
      ref={containerRef}
      className={classNames(
        "cru-card",
        `cru-card-${color ?? "primary"}`,
        `cru-card-border-${border ?? "color"}`,
        `cru-card-background-${background ?? "solid"}`,
        className,
      )}
      {...otherProps}
    >
      {children}
    </div>
  );
}