60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
}
|