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