42 lines
944 B
TypeScript
42 lines
944 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
|
|
type Props = {
|
|
zIndex?: string;
|
|
type?: string;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
onClick: (e: React.MouseEvent) => void;
|
|
};
|
|
|
|
export default function OverlayLayer({
|
|
zIndex = 'z-50',
|
|
type = 'flex',
|
|
children,
|
|
className,
|
|
...props
|
|
}: Props) {
|
|
const overlayStyle = useAppSelector((state) => state.style.overlayStyle);
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (props.onClick) {
|
|
props.onClick(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${type} ${zIndex} ${className} items-center flex-col justify-center overflow-hidden fixed inset-0`}
|
|
>
|
|
<div
|
|
className={`${overlayStyle} absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-dark-700 dark:via-dark-900 dark:to-dark-700`}
|
|
onClick={handleClick}
|
|
></div>
|
|
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|