parent
							
								
									b92f449041
								
							
						
					
					
						commit
						453eb582b3
					
				
				 6 changed files with 194 additions and 69 deletions
			
			
		| 
		 After Width: | Height: | Size: 7.9 KiB  | 
@ -0,0 +1,63 @@ | 
				
			|||||||
 | 
					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> | 
				
			||||||
 | 
					  ); | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,18 @@ | 
				
			|||||||
 | 
					.scanner{ | 
				
			||||||
 | 
					  animation-name : scanner; | 
				
			||||||
 | 
					  animation-iteration-count: infinite; | 
				
			||||||
 | 
					  animation-duration: 1.8s; | 
				
			||||||
 | 
					  animation-timing-function: ease; | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@keyframes scanner { | 
				
			||||||
 | 
					  0% { | 
				
			||||||
 | 
					    top : 10%; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  50%{ | 
				
			||||||
 | 
					    top : 38%; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  100%{ | 
				
			||||||
 | 
					    top : 10%; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue