76 lines
No EOL
2.3 KiB
TypeScript
76 lines
No EOL
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface CoordinateDisplayProps {
|
|
x: number;
|
|
y: number;
|
|
pixelColor?: string | null;
|
|
pixelOwner?: string | null;
|
|
zoom: number;
|
|
}
|
|
|
|
export function CoordinateDisplay({
|
|
x,
|
|
y,
|
|
pixelColor,
|
|
pixelOwner,
|
|
zoom
|
|
}: CoordinateDisplayProps) {
|
|
return (
|
|
<motion.div
|
|
className="fixed bottom-4 left-4 sm:bottom-6 sm:left-6 z-50 max-w-[calc(100vw-120px)] sm:max-w-none"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 30 }}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 400,
|
|
damping: 25
|
|
}}
|
|
>
|
|
<motion.div
|
|
className="bg-white/5 backdrop-blur-2xl rounded-xl sm:rounded-2xl px-3 sm:px-4 py-2 sm:py-3 border border-white/20 shadow-lg ring-1 ring-white/10"
|
|
whileHover={{
|
|
scale: 1.02
|
|
}}
|
|
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
|
>
|
|
<div className="space-y-1 sm:space-y-2 text-xs sm:text-sm">
|
|
{/* Coordinates */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-white/70 font-medium">Pos:</span>
|
|
<span className="text-white font-mono font-bold">
|
|
({x}, {y})
|
|
</span>
|
|
</div>
|
|
|
|
{/* Pixel info */}
|
|
{pixelColor && (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-white/70 font-medium">Pixel:</span>
|
|
<div
|
|
className="w-3 h-3 sm:w-4 sm:h-4 rounded border border-white/30"
|
|
style={{ backgroundColor: pixelColor }}
|
|
/>
|
|
<span className="text-white font-mono text-xs">
|
|
{pixelColor.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
|
|
{pixelOwner && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-white/70 font-medium">By:</span>
|
|
<span className="text-blue-300 font-medium text-xs max-w-[80px] sm:max-w-none truncate">
|
|
{pixelOwner}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
} |