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 */} {/* 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'
}`} }`}
@ -21,7 +20,7 @@ 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 */}
@ -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,15 +55,14 @@ 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'
}} }}