55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
import { t } from "i18next";
|
||
|
|
import styles from "./LoadingIndicator.module.css";
|
||
|
|
import { LoadingSpinIcon } from "./LoadingSpinIcon";
|
||
|
|
|
||
|
|
export type LoadingIndicatorProps = {
|
||
|
|
look?: "dark" | string;
|
||
|
|
size?: number;
|
||
|
|
active?: boolean;
|
||
|
|
title?: string;
|
||
|
|
subtitle?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const LoadingIndicator = ({
|
||
|
|
active = true,
|
||
|
|
look = "dark",
|
||
|
|
title = t("components.loading_indicator.title"),
|
||
|
|
subtitle = "",
|
||
|
|
}: LoadingIndicatorProps) => {
|
||
|
|
const isDark = look === "dark";
|
||
|
|
const loadingSpinClassName = isDark ? "text-brand" : "text-white";
|
||
|
|
|
||
|
|
if (!active) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.LoadingIndicator}>
|
||
|
|
<LoadingSpinIcon size={12} className={loadingSpinClassName} />
|
||
|
|
{/*<Spinner {...spinnerProps} />*/}
|
||
|
|
{title ? (
|
||
|
|
<h2
|
||
|
|
className={cn(
|
||
|
|
styles.LoadingIndicator__title,
|
||
|
|
isDark ? styles.LoadingIndicator__darktext : styles.LoadingIndicator__lighttext
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
) : null}
|
||
|
|
{subtitle ? (
|
||
|
|
<p
|
||
|
|
className={cn(
|
||
|
|
styles.LoadingIndicator__subtitle,
|
||
|
|
isDark ? styles.LoadingIndicator__darktext : styles.LoadingIndicator__lighttext
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{subtitle}
|
||
|
|
</p>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
LoadingIndicator.displayName = "LoadingIndicator";
|