Design tool
import React, { useState } from 'react';
import { Slider, ColorPicker, Button } from '@/components/ui/';
import { MoveIcon, RotateCcwIcon, RotateCwIcon, TypeIcon, ImageIcon } from 'lucide-react';
const MoralePatchDesigner = () => {
const [text, setText] = useState('Your Text Here');
const [textPosition, setTextPosition] = useState({ x: 50, y: 50 });
const [textRotation, setTextRotation] = useState(0);
const [textColor, setTextColor] = useState('#ffffff');
const [backgroundColor, setBackgroundColor] = useState('#000000');
const [image, setImage] = useState(null);
const [imagePosition, setImagePosition] = useState({ x: 50, y: 50 });
const [imageSize, setImageSize] = useState(100);
const handleTextChange = (e) => setText(e.target.value);
const handleTextMove = (direction) => {
setTextPosition(prev => ({
x: direction === 'left' ? prev.x - 5 : direction === 'right' ? prev.x + 5 : prev.x,
y: direction === 'up' ? prev.y - 5 : direction === 'down' ? prev.y + 5 : prev.y
}));
};
const handleTextRotate = (direction) => {
setTextRotation(prev => direction === 'cw' ? prev + 15 : prev - 15);
};
const handleImageUpload = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onloadend = () => {
setImage(reader.result);
};
if (file) {
reader.readAsDataURL(file);
}
};
const handleImageMove = (direction) => {
setImagePosition(prev => ({
x: direction === 'left' ? prev.x - 5 : direction === 'right' ? prev.x + 5 : prev.x,
y: direction === 'up' ? prev.y - 5 : direction === 'down' ? prev.y + 5 : prev.y
}));
};
return (
setImageSize(value)}
/>
)}
{image && (
)}
);
};
export default MoralePatchDesigner;
{image && (
)}
{text}