aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/common/Spinner.tsx
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2021-07-01 20:38:28 +0800
committerGitHub <noreply@github.com>2021-07-01 20:38:28 +0800
commiteb306e98fb94fdfbced7b7e91ffb3d85ecb28c2c (patch)
tree5afe2d654a51c8712aa30a419f6edfa19fe1a234 /FrontEnd/src/views/common/Spinner.tsx
parent825aac426d87180e62530321320fbb012efbd897 (diff)
parentb456334cedad566bf2c4c66481ec928dc59eda7d (diff)
downloadtimeline-eb306e98fb94fdfbced7b7e91ffb3d85ecb28c2c.tar.gz
timeline-eb306e98fb94fdfbced7b7e91ffb3d85ecb28c2c.tar.bz2
timeline-eb306e98fb94fdfbced7b7e91ffb3d85ecb28c2c.zip
Merge pull request #649 from crupest/drop-bootstrap
Drop bootstrap!!!
Diffstat (limited to 'FrontEnd/src/views/common/Spinner.tsx')
-rw-r--r--FrontEnd/src/views/common/Spinner.tsx43
1 files changed, 43 insertions, 0 deletions
diff --git a/FrontEnd/src/views/common/Spinner.tsx b/FrontEnd/src/views/common/Spinner.tsx
new file mode 100644
index 00000000..4c735fef
--- /dev/null
+++ b/FrontEnd/src/views/common/Spinner.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import classnames from "classnames";
+
+import { PaletteColorType } from "@/palette";
+
+import "./Spinner.css";
+
+export interface SpinnerProps {
+ size?: "sm" | "md" | "lg" | number | string;
+ color?: PaletteColorType;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+export default function Spinner(
+ props: SpinnerProps
+): React.ReactElement | null {
+ const { size, color, className, style } = props;
+ const calculatedSize =
+ size === "sm"
+ ? "18px"
+ : size === "md"
+ ? "30px"
+ : size === "lg"
+ ? "42px"
+ : typeof size === "number"
+ ? size
+ : size == null
+ ? "20px"
+ : size;
+ const calculatedColor = color ?? "primary";
+
+ return (
+ <span
+ className={classnames(
+ "cru-spinner",
+ `cru-color-${calculatedColor}`,
+ className
+ )}
+ style={{ width: calculatedSize, height: calculatedSize, ...style }}
+ />
+ );
+}