41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { useTranslation } from "@repo/rdx-ui/locales/i18n.ts";
|
|
import type { JSX } from "react";
|
|
|
|
import { LoadingIndicator } from "./loading-indicator.tsx";
|
|
|
|
export type LoadingOverlayProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
};
|
|
|
|
/**
|
|
* LoadingOverlay component
|
|
* @param {string} title - The title to display in the loading overlay.
|
|
* @param {string} subtitle - The subtitle to display in the loading overlay.
|
|
* @param {React.HTMLAttributes<HTMLDivElement>} props - Additional props to pass to the overlay.
|
|
* @returns {JSX.Element} The LoadingOverlay component.
|
|
*/
|
|
export const LoadingOverlay = ({ title, subtitle, ...props }: LoadingOverlayProps): JSX.Element => {
|
|
const { t } = useTranslation();
|
|
|
|
const { title: defaultTitle, subtitle: defaultSubtitle } = t("components.loading_overlay", {
|
|
returnObjects: true,
|
|
}) as { title: string; subtitle: string };
|
|
|
|
const loadingTitle = title || defaultTitle;
|
|
const loadingSubtitle = subtitle || defaultSubtitle;
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
"fixed top-0 bottom-0 left-0 right-0 z-50 w-full h-screen overflow-hidden flex justify-center bg-background/85"
|
|
}
|
|
{...props}
|
|
>
|
|
<LoadingIndicator look="dark" subtitle={loadingSubtitle} title={loadingTitle} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LoadingOverlay.displayName = "LoadingOverlay";
|