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

13
src/Zone.tsx
View file

@ -7,8 +7,7 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
<>
{/* Backdrop with fade animation */}
<div
className={`fixed inset-0 z-10 backdrop-blur-sm transition-all duration-300 ${
toggle
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'
}`}
@ -21,7 +20,7 @@ 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 */}
@ -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,15 +55,14 @@ 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={{
transitionDelay: toggle ? delay : '0ms'
}}