36 lines
795 B
TypeScript
36 lines
795 B
TypeScript
import { useTheme } from "@/hooks/theme/useTheme";
|
|
import "./styles.css";
|
|
import { useMemo } from "react";
|
|
|
|
export enum LoaderColor {
|
|
White = "white",
|
|
Black = "black",
|
|
Red = "red",
|
|
}
|
|
|
|
type LoaderProps = {
|
|
color?: LoaderColor;
|
|
className?: string;
|
|
};
|
|
|
|
function Loader({ color = LoaderColor.Black, className }: LoaderProps): JSX.Element {
|
|
const { darkTheme } = useTheme();
|
|
|
|
|
|
const colorClasses = useMemo(() => ({
|
|
[LoaderColor.White]: "loader__white",
|
|
[LoaderColor.Black]: darkTheme ? "loader__white" : "loader__black",
|
|
[LoaderColor.Red]: "loader__red",
|
|
}), [darkTheme]);
|
|
|
|
return (
|
|
<div className={`loader-container ${className}`}>
|
|
<div className={`loader ${colorClasses[color]}`}>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Loader;
|