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.
63 lines
1.9 KiB
63 lines
1.9 KiB
import React, { useEffect, useState } from "react"; |
|
import _ from 'lodash'; |
|
|
|
export default function Mobile({ mobilePosition }) { |
|
const [checked, setChecked] = useState(mobilePosition > 0 ? true : false); |
|
useEffect(() => { |
|
if (mobilePosition > 0) { |
|
setChecked(true); |
|
} else { |
|
setChecked(false); |
|
} |
|
}, [mobilePosition]); |
|
|
|
return ( |
|
<div |
|
className="fixed rounded-2xl flex flex-col overflow-hidden" |
|
style={{ |
|
top: "5%", |
|
height: (window.innerHeight * 9) / 10, |
|
width: (window.innerHeight * 10) / 20, |
|
left: mobilePosition + "%", |
|
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`, |
|
}} |
|
> |
|
{ |
|
<div className="relative w-full h-full min-h-full"> |
|
<div |
|
className="absolute left-0 top-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" |
|
style={{ height: "10%" }} |
|
></div> |
|
<div |
|
className="absolute left-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" |
|
style={{ |
|
top: "10%", |
|
height: "28%", |
|
width: "25%", |
|
}} |
|
></div> |
|
<div |
|
className="absolute right-0 top-40 backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" |
|
style={{ |
|
top: "10%", |
|
height: "28%", |
|
width: "25%", |
|
}} |
|
></div> |
|
<div |
|
className="absolute left-0 bottom-0 w-full backdrop-filter backdrop-blur-lg bg-black bg-opacity-40" |
|
style={{ height: "62%" }} |
|
></div> |
|
<div |
|
className="scanner absolute bg-green-300" |
|
style={{ height: 5, width: "50%", left: "25%", top: "10%" }} |
|
></div> |
|
</div> |
|
} |
|
{ |
|
<div className={_.join(["relative w-full h-full min-h-full bg-green-200 transition-all transform", checked ? '-translate-y-full' : ''], " ")}></div> |
|
} |
|
|
|
</div> |
|
); |
|
}
|
|
|