import React, { useState } from 'react'; const GRID_SIZE = 16; const COLORS = ["#ffffff", "#000000", "#ff0000", "#00ff00", "#0000ff", "#ffff00"]; export default function PixelArt() { const [grid, setGrid] = useState( Array(GRID_SIZE).fill(null).map(() => Array(GRID_SIZE).fill("#ffffff")) ); const [selectedColor, setSelectedColor] = useState("#000000"); const paintPixel = (row, col) => { const newGrid = grid.map(r => [...r]); newGrid[row][col] = selectedColor; setGrid(newGrid); }; const clearGrid = () => { setGrid(Array(GRID_SIZE).fill(null).map(() => Array(GRID_SIZE).fill("#ffffff"))); }; return (

Pixel Art

{COLORS.map(color => (

setSelectedColor(color)} style={{ width: "30px", height: "30px", backgroundColor: color, border: selectedColor === color ? "3px solid #000" : "1px solid #333", cursor: "pointer", }} /> ))}

{grid.map((row, rIdx) => row.map((color, cIdx) => (

paintPixel(rIdx, cIdx)} style={{ width: "20px", height: "20px", backgroundColor: color, cursor: "pointer", border: "1px solid #ccc" }} /> )) )}

); }

Pixel Art

Code Editor

Live Preview

Pixel Art

Code Editor

Live Preview