78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
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'
|
||
}`}
|
||
onClick={() => setToggle(false)}
|
||
/>
|
||
|
||
{/* Main drawer */}
|
||
<div className={`
|
||
fixed bottom-0 left-1/2 -translate-x-1/2 z-20
|
||
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-90' : 'h-16'}
|
||
`}>
|
||
|
||
{/* Drawer handle/button */}
|
||
<div className="relative">
|
||
|
||
<button
|
||
onClick={() => setToggle(!toggle)}
|
||
className="w-full py-3 px-6 text-white font-medium text-lg
|
||
transition-colors duration-200
|
||
flex items-center justify-center gap-2"
|
||
>
|
||
<span>選擇功能</span>
|
||
<span className={`transition-transform duration-300 ${toggle ? 'rotate-180' : ''}`}>
|
||
▲
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Menu content with staggered animations */}
|
||
<div className={`
|
||
px-6 pb-6 overflow-hidden
|
||
transition-all duration-500 ease-out h-fit
|
||
`}>
|
||
<div className="grid gap-4 pt-4">
|
||
{[
|
||
{ key: 'post', label: 'PO文', icon: '✏️', delay: '100ms' },
|
||
{ key: 'delete', label: '刪文', icon: '🗑️', delay: '200ms' },
|
||
{ key: 'view', label: '查看', icon: '👁️', delay: '300ms' },
|
||
].map(({ key, label, icon, delay }) => (
|
||
<button
|
||
key={key}
|
||
onClick={() => { setZone(key); setToggle(false) }}
|
||
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
|
||
"
|
||
style={{
|
||
transitionDelay: toggle ? delay : '0ms'
|
||
}}
|
||
>
|
||
<span className="text-2xl">{icon}</span>
|
||
<span>{label}</span>
|
||
</button>
|
||
))}
|
||
<p className='text-slate-500 hover:text-gray-300 active:text-gray-200 w-fit mx-auto'>隱私政策：我們會搜集IP</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|