You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
681 B
31 lines
681 B
import React from 'react';
|
|
|
|
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
|
|
|
interface BlurProps extends DefaultDivProps {
|
|
disableOnMd?: boolean;
|
|
}
|
|
|
|
export const Blur = ({
|
|
disableOnMd,
|
|
className,
|
|
onClick,
|
|
...props
|
|
}: BlurProps): JSX.Element => {
|
|
return (
|
|
<div
|
|
className={`absolute inset-0 z-10 w-full h-full transition-opacity ${
|
|
disableOnMd ? 'md:hidden' : 'test'
|
|
} ${className}`}
|
|
{...props}
|
|
>
|
|
<div
|
|
onClick={onClick}
|
|
className={`absolute inset-0 w-full h-full backdrop-filter backdrop-blur-sm ${
|
|
disableOnMd ? 'md:hidden' : 'test'
|
|
}`}
|
|
tabIndex={0}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|