TypoGenie
60f39ed961
- Ported Minimalist templates to JSON (Swiss Grid, Brutalist, etc.) - Ported Tech templates to JSON (SaaS, Terminal, Cyberpunk, etc.) - Ported Creative templates to JSON (Art Gallery, Zine, Pop Art, etc.) - Ported Industrial templates to JSON (Blueprint, Factory, Schematic, etc.) - Ported Nature templates to JSON (Botanical, Ocean, Mountain, etc.) - Ported Lifestyle templates to JSON (Cookbook, Travel, Coffee House, etc.) - Ported Vintage templates to JSON (Art Deco, Medieval, Retro 80s, etc.) - Updated README.md to reflect the new JSON-based style system (example configuration and contribution workflow) - Completed migration of over 150 styles to the new architecture
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { ZoomIn, ZoomOut } from 'lucide-react';
|
|
|
|
interface ZoomControlProps {
|
|
zoom: number;
|
|
onZoomChange: (zoom: number) => void;
|
|
}
|
|
|
|
export const ZoomControl: React.FC<ZoomControlProps> = ({ zoom, onZoomChange }) => {
|
|
const decreaseZoom = () => onZoomChange(Math.max(50, zoom - 10));
|
|
const increaseZoom = () => onZoomChange(Math.min(200, zoom + 10));
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 bg-zinc-900/80 rounded-lg border border-zinc-800 px-2 py-1">
|
|
<motion.button
|
|
onClick={decreaseZoom}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className="p-1 text-zinc-400 hover:text-white transition-colors"
|
|
aria-label="Zoom out"
|
|
>
|
|
<ZoomOut size={16} />
|
|
</motion.button>
|
|
|
|
<span className="text-xs font-medium text-zinc-300 min-w-[3rem] text-center">
|
|
{zoom}%
|
|
</span>
|
|
|
|
<motion.button
|
|
onClick={increaseZoom}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className="p-1 text-zinc-400 hover:text-white transition-colors"
|
|
aria-label="Zoom in"
|
|
>
|
|
<ZoomIn size={16} />
|
|
</motion.button>
|
|
</div>
|
|
);
|
|
};
|