diff options
author | crupest <crupest@outlook.com> | 2023-09-20 20:26:42 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-09-20 20:26:42 +0800 |
commit | f836d77e73f3ea0af45c5f71dae7268143d6d86f (patch) | |
tree | 573cfafd972106d69bef0d41ff5f270ec3c43ec2 /FrontEnd/src/components/Spinner.tsx | |
parent | 4a069bf1268f393d5467166356f691eb89963152 (diff) | |
parent | 901fe3d7c032d284da5c9bce24c4aaee9054c7ac (diff) | |
download | timeline-f836d77e73f3ea0af45c5f71dae7268143d6d86f.tar.gz timeline-f836d77e73f3ea0af45c5f71dae7268143d6d86f.tar.bz2 timeline-f836d77e73f3ea0af45c5f71dae7268143d6d86f.zip |
Merge pull request #1395 from crupest/dev
Refector 2023 v0.1
Diffstat (limited to 'FrontEnd/src/components/Spinner.tsx')
-rw-r--r-- | FrontEnd/src/components/Spinner.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/FrontEnd/src/components/Spinner.tsx b/FrontEnd/src/components/Spinner.tsx new file mode 100644 index 00000000..50ccf0b2 --- /dev/null +++ b/FrontEnd/src/components/Spinner.tsx @@ -0,0 +1,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?: 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} + /> + ); +} |