feat(tools): add brush controls

view/bottom-controls/BrushControls.tsx

@@ -0,0 +1,59 @@
+import { commandIds } from "@commands/ids";
+import type { AppStore } from "@editor/store";
+import type { BrushSettings, ToolId } from "@editor/tools";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlLabelClass } from "./styles";
+
+export type BrushControlsProps = {
+  tool: Extract<ToolId, "brush" | "eraser">;
+  settings: BrushSettings;
+  dispatch: AppStore["dispatch"];
+};
+
+export function BrushControls({ tool, settings, dispatch }: BrushControlsProps) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className="px-2 font-medium text-white/85">{tool === "eraser" ? "Eraser" : "Brush"}</span>
+      <BottomControlDivider />
+      {tool === "brush" ? (
+        <label className="flex items-center gap-1.5">
+          <span className={bottomControlLabelClass()}>Color</span>
+          <input
+            type="color"
+            className="h-7 w-8 cursor-pointer rounded border-0 bg-transparent p-0"
+            value={settings.color}
+            aria-label="Brush color"
+            onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { color: event.target.value })}
+          />
+        </label>
+      ) : null}
+      <label className="flex items-center gap-1.5">
+        <span className={bottomControlLabelClass()}>Size</span>
+        <input
+          type="range"
+          min={1}
+          max={200}
+          value={settings.size}
+          className="w-24 accent-white"
+          aria-label={`${tool} size`}
+          onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { size: Number(event.target.value) })}
+        />
+        <span className="w-8 text-right text-white">{Math.round(settings.size)}</span>
+      </label>
+      <BottomControlDivider />
+      <label className="flex items-center gap-1.5">
+        <span className={bottomControlLabelClass()}>Hard</span>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          value={settings.hardness}
+          className="w-24 accent-white"
+          aria-label={`${tool} hardness`}
+          onChange={(event) => dispatch(commandIds.toolSetBrushSettings, { hardness: Number(event.target.value) })}
+        />
+        <span className="w-8 text-right text-white">{Math.round(settings.hardness)}</span>
+      </label>
+    </div>
+  );
+}