39 lines
887 B
TypeScript
39 lines
887 B
TypeScript
import React from "react";
|
|
|
|
import { SHAPES } from "../../shapes";
|
|
import { capitalizeString } from "../../utils";
|
|
|
|
interface PanelToolsProps {
|
|
activeTool: string;
|
|
onToolChange: (value: string) => void;
|
|
}
|
|
|
|
export const PanelTools: React.FC<PanelToolsProps> = ({
|
|
activeTool,
|
|
onToolChange
|
|
}) => {
|
|
return (
|
|
<>
|
|
<h4>Shapes</h4>
|
|
<div className="panelTools">
|
|
{SHAPES.map(({ value, icon }) => (
|
|
<label
|
|
key={value}
|
|
className="tool"
|
|
title={`${capitalizeString(value)} - ${capitalizeString(value)[0]}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
checked={activeTool === value}
|
|
onChange={() => {
|
|
onToolChange(value);
|
|
}}
|
|
/>
|
|
<div className="toolIcon">{icon}</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|