+ {/* Class selector */}
+
+
+ Class:
+
+
+ value && setSelectedClass(value)}
+ className="inline-flex"
+ >
+ {CLASSES.map((cls, i) => (
+
+
+ {cls}
+
+ ))}
+
+
+
+
+ {/* Brush size slider */}
+
+
+ Brush Size: {brushSize}
+
+
setBrushSize(value)}
+ min={5}
+ max={100}
+ step={1}
+ className="relative flex items-center w-full h-5"
+ >
+
+
+
+
+
+
+
+ {/* Action buttons */}
+
+
+
+
+
+ {/* Counts - hidden on small screens, shown on lg+ */}
+
+ {CLASSES.map((cls, i) => (
+
+ {cls}: {counts[cls]}
+
+ ))}
+
+