FrontEnd/src/components/button/FlatButton.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

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

import { Text, useC, ClickableColor } from "../common";

import "./FlatButton.css";

interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> {
  color?: ClickableColor;
  text?: Text;
  buttonRef?: Ref<HTMLButtonElement> | null;
}

export default function FlatButton(props: FlatButtonProps) {
  const { color, text, className, children, buttonRef, ...otherProps } = props;

  if (text != null && children != null) {
    console.warn("You can't set both text and children props.");
  }

  const c = useC();

  return (
    <button
      ref={buttonRef}
      className={classNames(
        "cru-flat-button",
        `cru-clickable-${color ?? "primary"}`,
        className,
      )}
      {...otherProps}
    >
      {text != null ? c(text) : children}
    </button>
  );
}