38 lines
1009 B
TypeScript
38 lines
1009 B
TypeScript
|
import ColourPicker from "./colourPicker";
|
||
|
|
import type { Region } from "../../../types/types";
|
||
|
|
|
||
|
|
type RegionSelectorProps = {
|
||
|
|
regions: Region[];
|
||
|
|
selectedRegionIndex: number;
|
||
|
|
onSelectRegion: (index: number) => void;
|
||
|
|
onChangeRegionColour: (index: number, colour: string) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const RegionSelector = ({
|
||
|
|
regions,
|
||
|
|
selectedRegionIndex,
|
||
|
|
onSelectRegion,
|
||
|
|
onChangeRegionColour,
|
||
|
|
}: RegionSelectorProps) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<h2>Region Select</h2>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{regions.map((region, idx) => (
|
||
|
|
<div key={region.name}>
|
||
|
|
<label style={{ marginRight: "0.5rem" }}>
|
||
|
|
<input type="radio" checked={selectedRegionIndex === idx} onChange={() => onSelectRegion(idx)} />{" "}
|
||
|
|
{region.name}
|
||
|
|
</label>
|
||
|
|
<ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RegionSelector;
|