Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 77x 1x | "use client"
import type React from "react"
import { memo } from "react"
import { motion } from "framer-motion"
import styles from "./DesktopIcon.module.css"
interface DesktopIconProps {
app: {
id: string
name: string
icon: string
type: string
}
isSelected: boolean
onClick: (e: React.MouseEvent) => void
onDoubleClick: () => void
}
const DesktopIcon = memo(function DesktopIcon({ app, isSelected, onClick, onDoubleClick }: DesktopIconProps) {
return (
<motion.div
className={`${styles.desktopIcon} ${isSelected ? styles.selected : ""}`}
onClick={onClick}
onDoubleClick={onDoubleClick}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
layout
>
<div className={styles.iconContainer}>
<span className={styles.icon}>{app.icon}</span>
</div>
<span className={styles.iconName}>{app.name}</span>
</motion.div>
)
})
export default DesktopIcon
|