51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import styles from './ObscuredOverlay/ObscuredOverlay.module.css';
|
|
|
|
type ObscuredOverlayProps = {
|
|
obscured: boolean;
|
|
overlayMessage?: React.ReactNode;
|
|
buttonText?: string;
|
|
onButtonClick?: () => void;
|
|
children: React.ReactNode;
|
|
// Optional border radius for the overlay container. If undefined, no radius is applied.
|
|
borderRadius?: string | number;
|
|
};
|
|
|
|
export default function ObscuredOverlay({
|
|
obscured,
|
|
overlayMessage,
|
|
buttonText,
|
|
onButtonClick,
|
|
children,
|
|
borderRadius,
|
|
}: ObscuredOverlayProps) {
|
|
return (
|
|
<div className={styles.container}>
|
|
{children}
|
|
{obscured && (
|
|
<div
|
|
className={styles.overlay}
|
|
style={{
|
|
...(borderRadius !== undefined ? { borderRadius } : {}),
|
|
}}
|
|
>
|
|
<div className={styles.overlayContent}>
|
|
{overlayMessage && (
|
|
<div className={styles.overlayMessage}>
|
|
{overlayMessage}
|
|
</div>
|
|
)}
|
|
{buttonText && onButtonClick && (
|
|
<button type="button" onClick={onButtonClick} className={styles.overlayButton}>
|
|
{buttonText}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|