51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { cn } from "@repo/shadcn-ui/lib/utils";
|
|
import { useTranslation } from "../../locales/i18n.ts";
|
|
import { LoadingSpinIcon } from "./loading-spin-icon.tsx";
|
|
|
|
export type LoadingIndicatorProps = {
|
|
look?: "dark" | string;
|
|
size?: number;
|
|
active?: boolean;
|
|
title?: string;
|
|
subtitle?: string;
|
|
};
|
|
|
|
export const LoadingIndicator = ({
|
|
active = true,
|
|
look = "dark",
|
|
title,
|
|
subtitle = "",
|
|
}: LoadingIndicatorProps) => {
|
|
const { t } = useTranslation();
|
|
const isDark = look === "dark";
|
|
const loadingSpinClassName = isDark ? "text-brand" : "text-white";
|
|
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<div className={"flex flex-col items-center max-w-xs justify-center w-full h-full mx-auto"}>
|
|
<LoadingSpinIcon size={12} className={loadingSpinClassName} />
|
|
{/*<Spinner {...spinnerProps} />*/}
|
|
{title ? (
|
|
<h2
|
|
className={cn(
|
|
"mt-6 text-xl font-semibold text-center text-white",
|
|
isDark ? "text-slate-600" : "text-white"
|
|
)}
|
|
>
|
|
{title || t("components.loading_indicator.title")}
|
|
</h2>
|
|
) : null}
|
|
{subtitle ? (
|
|
<p className={cn("text-center text-white", isDark ? "text-slate-600" : "text-white")}>
|
|
{subtitle || t("components.loading_indicator.subtitle")}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LoadingIndicator.displayName = "LoadingIndicator";
|