42 lines
931 B
TypeScript
42 lines
931 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>
|
|
)
|
|
}
|