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

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>
);
}