jasinco/nim
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Test Fix the showing of zone block

Browse source
This commit is contained in:
jasinco 2025-06-11 00:34:04 +08:00
parent a592828feb
commit 2e842cd3e3
1 changed files with 15 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/Zone.tsx
View file

@ -2,16 +2,15 @@ import { useState } from 'react'
export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => { export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
const [toggle, setToggle] = useState(false) const [toggle, setToggle] = useState(false)
return ( return (
<> <>
{/* Backdrop with fade animation */} {/* Backdrop with fade animation */}
<div <div
className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${ className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${toggle
toggle ? 'bg-black/50 opacity-100 pointer-events-auto'
? 'bg-black/50 opacity-100 pointer-events-auto' : 'bg-black/0 opacity-0 pointer-events-none'
: 'bg-black/0 opacity-0 pointer-events-none' }`}
}`}
onClick={() => setToggle(false)} onClick={() => setToggle(false)}
/> />
@ -21,15 +20,15 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
w-[min(80dvw,400px)] bg-zinc-800 w-[min(80dvw,400px)] bg-zinc-800
rounded-t-3xl shadow-2xl border-t border-zinc-600 rounded-t-3xl shadow-2xl border-t border-zinc-600
transition-all duration-500 ease-out transition-all duration-500 ease-out
${toggle ? 'h-[45dvh]' : 'h-16'} ${toggle ? 'h-90' : 'h-16'}
`}> `}>
{/* Drawer handle/button */} {/* Drawer handle/button */}
<div className="relative"> <div className="relative">
{/* Visual handle indicator */} {/* Visual handle indicator */}
<div className="w-12 h-1 bg-zinc-500 rounded-full mx-auto mt-3 mb-2" /> <div className="w-12 h-1 bg-zinc-500 rounded-full mx-auto mt-3 mb-2" />
<button <button
onClick={() => setToggle(!toggle)} onClick={() => setToggle(!toggle)}
className="w-full py-3 px-6 text-white font-medium text-lg className="w-full py-3 px-6 text-white font-medium text-lg
hover:bg-zinc-700 transition-colors duration-200 hover:bg-zinc-700 transition-colors duration-200
@ -45,8 +44,7 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
{/* Menu content with staggered animations */} {/* Menu content with staggered animations */}
<div className={` <div className={`
px-6 pb-6 overflow-hidden px-6 pb-6 overflow-hidden
transition-all duration-500 ease-out transition-all duration-500 ease-out h-fit
${toggle ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}
`}> `}>
<div className="grid gap-4 pt-4"> <div className="grid gap-4 pt-4">
{[ {[
@ -57,16 +55,15 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
<button <button
key={key} key={key}
onClick={() => { setZone(key); setToggle(false) }} onClick={() => { setZone(key); setToggle(false) }}
className={` className="
w-full py-4 px-6 bg-zinc-700 hover:bg-zinc-600 w-full py-4 px-6 bg-zinc-700 hover:bg-zinc-600
rounded-xl text-white text-lg font-medium rounded-xl text-white text-lg font-medium
flex items-center gap-4 flex items-center gap-4
transform transition-all duration-300 ease-out transform transition-all duration-300 ease-out
hover:scale-105 hover:shadow-lg hover:scale-105 hover:shadow-lg
active:scale-95 active:scale-95
${toggle ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'} "
`} style={{
style={{
transitionDelay: toggle ? delay : '0ms' transitionDelay: toggle ? delay : '0ms'
}} }}
> >
@ -79,4 +76,4 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
</div> </div>
</> </>
) )
} }