42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Spinner } from "./spinner";
|
|
|
|
interface LoadingOverlayProps {
|
|
/** Whether the overlay is visible */
|
|
isVisible: boolean;
|
|
/** Main loading message */
|
|
title: string;
|
|
/** Optional subtitle/description */
|
|
subtitle?: string;
|
|
/** Spinner size */
|
|
spinnerSize?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
/** Custom spinner color */
|
|
spinnerClassName?: string;
|
|
/** Custom overlay background */
|
|
overlayClassName?: string;
|
|
}
|
|
|
|
export function LoadingOverlay({
|
|
isVisible,
|
|
title,
|
|
subtitle,
|
|
spinnerSize = "xl",
|
|
spinnerClassName = "text-primary",
|
|
overlayClassName = "bg-background/80 backdrop-blur-sm",
|
|
}: LoadingOverlayProps) {
|
|
if (!isVisible) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={`fixed inset-0 z-50 flex items-center justify-center ${overlayClassName}`}>
|
|
<div className="text-center max-w-sm mx-auto px-4">
|
|
<div className="flex justify-center mb-6">
|
|
<Spinner size={spinnerSize} className={spinnerClassName} />
|
|
</div>
|
|
<p className="text-lg font-medium text-foreground">{title}</p>
|
|
{subtitle && <p className="text-sm text-muted-foreground mt-2">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|