54d27a7ec5
- Fix pixel data storage to include user information (userId, username, timestamp) - Enhance zoom controls to center properly without drift - Improve mobile modal centering with flexbox layout - Add dynamic backend URL detection for network access - Fix CORS configuration for development mode - Add mobile-optimized touch targets and safe area support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
No EOL
2.1 KiB
TypeScript
51 lines
No EOL
2.1 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
|
||
interface ZoomControlsProps {
|
||
zoom: number;
|
||
onZoomIn: () => void;
|
||
onZoomOut: () => void;
|
||
}
|
||
|
||
export function ZoomControls({ zoom, onZoomIn, onZoomOut }: ZoomControlsProps) {
|
||
return (
|
||
<motion.div
|
||
className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-40"
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
||
>
|
||
<div className="flex flex-col gap-2 sm:gap-3">
|
||
{/* Zoom In Button */}
|
||
<motion.button
|
||
className="w-14 h-14 sm:w-16 sm:h-16 bg-white/10 backdrop-blur-2xl rounded-full border border-white/20 shadow-lg ring-1 ring-white/10 flex items-center justify-center text-white text-2xl sm:text-3xl font-bold hover:bg-white/20 active:bg-white/30 transition-all duration-200 select-none touch-manipulation min-h-[56px] min-w-[56px]"
|
||
onClick={onZoomIn}
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
transition={{ type: "spring", stiffness: 400 }}
|
||
>
|
||
+
|
||
</motion.button>
|
||
|
||
{/* Zoom Out Button */}
|
||
<motion.button
|
||
className="w-14 h-14 sm:w-16 sm:h-16 bg-white/10 backdrop-blur-2xl rounded-full border border-white/20 shadow-lg ring-1 ring-white/10 flex items-center justify-center text-white text-2xl sm:text-3xl font-bold hover:bg-white/20 active:bg-white/30 transition-all duration-200 select-none touch-manipulation min-h-[56px] min-w-[56px]"
|
||
onClick={onZoomOut}
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
transition={{ type: "spring", stiffness: 400 }}
|
||
>
|
||
−
|
||
</motion.button>
|
||
|
||
{/* Zoom Display */}
|
||
<div className="bg-white/5 backdrop-blur-2xl rounded-xl sm:rounded-2xl px-2 py-1 sm:px-3 sm:py-2 border border-white/20 shadow-lg ring-1 ring-white/10">
|
||
<div className="text-white font-bold text-xs sm:text-sm text-center min-w-[40px] sm:min-w-[50px]">
|
||
{Math.round(zoom * 100)}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
} |