Sacha WeatherstoneandGitHub
e14c628ecf
* WIP * WIP * WIP * WIP * Draw improvements, disabled user zooming * Update status indicator * Add dynamic channel name with icon * Add more settings * WIP * WIP
34 lines
721 B
TypeScript
34 lines
721 B
TypeScript
import React from 'react';
|
|
|
|
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
|
|
|
interface LocalBlurProps {
|
|
disableOnMd?: boolean;
|
|
}
|
|
|
|
export type BlurProps = LocalBlurProps & DefaultDivProps;
|
|
|
|
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>
|
|
);
|
|
};
|