Spaces:
Running
Running
File size: 2,563 Bytes
8af739b ad31128 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
'use client'
import React, { useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import {
Image,
PaintBrush,
Upload,
Palette,
Desktop as DesktopIcon,
Gradient
} from '@phosphor-icons/react'
interface DesktopContextMenuProps {
isOpen: boolean
position: { x: number; y: number }
onClose: () => void
onChangeBackground: (type: 'upload' | 'preset') => void
}
const presetBackgrounds = [
{ name: 'Ubuntu Purple', value: 'gradient-purple' },
{ name: 'Ocean Blue', value: 'gradient-blue' },
{ name: 'Forest Green', value: 'gradient-green' },
{ name: 'Sunset Orange', value: 'gradient-orange' },
{ name: 'Dark Mode', value: 'gradient-dark' },
]
export function DesktopContextMenu({
isOpen,
position,
onClose,
onChangeBackground
}: DesktopContextMenuProps) {
const menuRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
onClose()
}
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose()
}
}
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside)
document.addEventListener('keydown', handleEscape)
}
return () => {
document.removeEventListener('mousedown', handleClickOutside)
document.removeEventListener('keydown', handleEscape)
}
}, [isOpen, onClose])
return (
<AnimatePresence>
{isOpen && (
<motion.div
ref={menuRef}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.1 }}
className="fixed z-50 bg-[#2C2C2C]/95 backdrop-blur-md rounded-lg shadow-2xl border border-white/10 py-2 min-w-[240px]"
style={{
left: `${position.x}px`,
top: `${position.y}px`,
maxHeight: 'calc(100vh - 20px)',
overflowY: 'auto'
}}
>
{/* Change Background Section */}
<button
onClick={() => onChangeBackground('preset')}
className="w-full px-3 py-2 flex items-center gap-3 hover:bg-white/10 transition-colors text-left"
>
<Image size={18} className="text-blue-400" />
<span className="text-sm text-gray-200">Change Wallpaper</span>
</button>
</motion.div>
)}
</AnimatePresence>
)
} |