"use client"; import React, { useState, useRef } from "react"; import { Button } from "@/components/ui/button"; import { Download, Trash2, Eraser, Pencil } from "lucide-react"; import { cn } from "@/lib/utils"; const GRID_SIZE = 16; const COLORS = [ "#000000", // Black "#ffffff", // White "#ef4444", // Red "#f97316", // Orange "#eab308", // Yellow "#22c55e", // Green "#3b82f6", // Blue "#a855f7", // Purple "#ec4899", // Pink "#78716c", // Stone ]; export function PixelPainter() { const [grid, setGrid] = useState( Array(GRID_SIZE * GRID_SIZE).fill("transparent") ); const [selectedColor, setSelectedColor] = useState("#000000"); const [isDrawing, setIsDrawing] = useState(false); const [tool, setTool] = useState<"pencil" | "eraser">("pencil"); const canvasRef = useRef(null); const handlePixelClick = (index: number) => { const newGrid = [...grid]; newGrid[index] = tool === "pencil" ? selectedColor : "transparent"; setGrid(newGrid); }; const handleMouseEnter = (index: number) => { if (isDrawing) { handlePixelClick(index); } }; const clearGrid = () => { setGrid(Array(GRID_SIZE * GRID_SIZE).fill("transparent")); }; const exportImage = () => { const canvas = document.createElement("canvas"); canvas.width = GRID_SIZE * 10; // Scale up for visibility canvas.height = GRID_SIZE * 10; const ctx = canvas.getContext("2d"); if (!ctx) return; grid.forEach((color, index) => { const x = (index % GRID_SIZE) * 10; const y = Math.floor(index / GRID_SIZE) * 10; ctx.fillStyle = color === "transparent" ? "rgba(0,0,0,0)" : color; ctx.fillRect(x, y, 10, 10); }); const link = document.createElement("a"); link.download = "pixel-art.png"; link.href = canvas.toDataURL("image/png"); link.click(); }; return (

setIsDrawing(true)} onMouseUp={() => setIsDrawing(false)} onMouseLeave={() => setIsDrawing(false)} > {grid.map((color, index) => (

handlePixelClick(index)} onMouseEnter={() => handleMouseEnter(index)} /> ))}

{COLORS.map((color) => (

); }

Pixel Art Painter