FrontEnd/src/components/Spinner.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
40
41
42
43
44
45
46

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

import "./Spinner.css";

const sizeMap: Record<string, string> = {
  sm: "18px",
  md: "30px",
  lg: "42px",
};

function calculateSize(size: SpinnerProps["size"]) {
  if (size == null) {
    return "1em";
  }
  if (typeof size === "number") {
    return size;
  }
  if (size in sizeMap) {
    return sizeMap[size];
  }
  return size;
}

export interface SpinnerProps extends ComponentPropsWithoutRef<"span"> {
  size?: "sm" | "md" | "lg" | number | string;
  className?: string;
  style?: CSSProperties;
}

export default function Spinner(props: SpinnerProps) {
  const { size, className, style, ...otherProps } = props;
  const calculatedSize = calculateSize(size);

  return (
    <span
      className={classNames("cru-spinner", className)}
      style={{
        width: calculatedSize,
        height: calculatedSize,
        ...style,
      }}
      {...otherProps}
    />
  );
}