Spaces:
Running
Running
File size: 2,332 Bytes
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 |
'use client'
import React from 'react'
import { House, Trash, Calendar as CalendarIcon, Clock, Folder, Globe, Sparkle, GameController } from '@phosphor-icons/react'
interface DesktopIconProps {
icon: 'home' | 'trash' | 'calendar' | 'clock' | 'game' | 'folder' | 'browser' | 'gemini'
label: string
onClick: () => void
}
export function DesktopIcon({ icon, label, onClick }: DesktopIconProps) {
const getIcon = () => {
switch(icon) {
case 'home': return House
case 'calendar': return CalendarIcon
case 'clock': return Clock
case 'game': return GameController
case 'folder': return Folder
case 'browser': return Globe
case 'gemini': return Sparkle
case 'trash': return Trash
default: return Folder
}
}
const Icon = getIcon()
const getGradient = () => {
if (icon === 'calendar') {
return 'from-purple-500/80 to-purple-700/80 group-hover:from-purple-400/80 group-hover:to-purple-600/80'
}
if (icon === 'clock') {
return 'from-teal-500/80 to-cyan-600/80 group-hover:from-teal-400/80 group-hover:to-cyan-500/80'
}
if (icon === 'game') {
return 'from-pink-500/80 to-rose-600/80 group-hover:from-pink-400/80 group-hover:to-rose-500/80'
}
if (icon === 'folder') {
return 'from-orange-500/80 to-orange-700/80 group-hover:from-orange-400/80 group-hover:to-orange-600/80'
}
if (icon === 'browser') {
return 'from-blue-500/80 to-cyan-600/80 group-hover:from-blue-400/80 group-hover:to-cyan-500/80'
}
if (icon === 'gemini') {
return 'from-[#E95420]/80 to-[#d14818]/80 group-hover:from-[#E95420] group-hover:to-[#d14818]'
}
return 'from-gray-600/80 to-gray-700/80 group-hover:from-gray-500/80 group-hover:to-gray-600/80'
}
return (
<button
onClick={onClick}
className="flex flex-col items-center gap-1 p-2 rounded hover:bg-white/10 transition-colors w-24 group mb-2"
>
<div className={`w-16 h-16 rounded-lg bg-gradient-to-br ${getGradient()} backdrop-blur-sm flex items-center justify-center transition-all`}>
<Icon size={32} weight="regular" className="text-white" />
</div>
<span className="text-white text-xs text-center drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] font-medium">
{label}
</span>
</button>
)
}
|