32 lines
853 B
Plaintext
32 lines
853 B
Plaintext
|
import "./index.css";
|
||
|
|
|
||
|
|
export default ({ text = "", className = "", backgroundImage }) => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`lock-wrapper ${className}`}
|
||
|
|
style={backgroundImage ? {
|
||
|
|
backgroundImage: `url(${backgroundImage})`,
|
||
|
|
backgroundSize: 'cover',
|
||
|
|
backgroundPosition: 'center',
|
||
|
|
position: 'relative'
|
||
|
|
} : {}}
|
||
|
|
>
|
||
|
|
{backgroundImage && (
|
||
|
|
<div style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
backdropFilter: 'blur(20px)',
|
||
|
|
WebkitBackdropFilter: 'blur(20px)',
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)'
|
||
|
|
}} />
|
||
|
|
)}
|
||
|
|
<div className="lock" style={backgroundImage ? { position: 'relative', zIndex: 1 } : {}}>
|
||
|
|
{text ? <span>{text}</span> : null}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|