Spaces:
Running
Running
File size: 2,077 Bytes
8af739b c6c4e58 8af739b c6c4e58 8af739b 88f42aa 8af739b 88f42aa 8af739b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
'use client'
import React from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
Info,
Image
} from '@phosphor-icons/react'
interface ContextMenuProps {
isOpen: boolean
position: { x: number; y: number }
onClose: () => void
onAction: (action: string) => void
}
export function ContextMenu({ isOpen, position, onClose, onAction }: ContextMenuProps) {
const menuItems = [
{ id: 'change-wallpaper', label: 'Change Background', icon: Image },
{ id: 'get-info', label: 'Get Info', icon: Info },
]
const handleAction = (actionId: string) => {
onAction(actionId)
onClose()
}
return (
<AnimatePresence>
{isOpen && (
<>
{/* Invisible backdrop to detect outside clicks */}
<div
className="fixed inset-0 z-[79]"
onClick={onClose}
/>
{/* Context Menu */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.1 }}
className="fixed glass rounded-lg shadow-xl py-1 z-[80] min-w-[200px]"
style={{
left: position.x,
top: position.y,
// Prevent menu from going off-screen
maxWidth: `calc(100vw - ${position.x}px - 20px)`,
maxHeight: `calc(100vh - ${position.y}px - 20px)`
}}
>
{menuItems.map((item) => {
const Icon = item.icon
return (
<button
key={item.id}
onClick={() => handleAction(item.id)}
className="w-full text-left px-4 py-1.5 hover:bg-blue-500 hover:text-white transition-colors flex items-center gap-3 text-sm"
>
<Icon size={16} weight="regular" />
<span>{item.label}</span>
</button>
)
})}
</motion.div>
</>
)}
</AnimatePresence>
)
} |