text toolbar - delete text button added

src/components/text-toolbar.tsx

@@ -0,0 +1,61 @@
+import { FontFamilyPicker } from "./texte-editing-tools/text-family-picker";
+import { FontSizeSelector } from "./texte-editing-tools/text-size-selector";
+import type { ChangeEvent } from "react";
+import { FontStyle } from "./texte-editing-tools/text-style-selector";
+import { FontAlign } from "./texte-editing-tools/text-align-selector";
+import { Separator } from "./ui/separator";
+import { SpacingSettings } from "./texte-editing-tools/text-spacing-settings";
+import { type TransformableTextProps } from "@/components/transformable-text";
+import { Button } from "@/components/ui/button";
+import { useAppDispatch } from "@/hooks";
+import { deleteShape } from "@/store/app.slice";
+
+type Props = {
+  selectedItemId: string;
+  currentText: TransformableTextProps["textProps"];
+  onTextColorChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+export const TextToolbar = ({
+  currentText,
+  selectedItemId,
+  onTextColorChange,
+}: Props) => {
+  const dispatch = useAppDispatch();
+  if (!currentText) return null;
+  const deleteTextHandler = (selectedItemId) => {
+    dispatch(deleteShape(selectedItemId));
+  };
+
+  return (
+    <>
+      <FontFamilyPicker
+        currentText={currentText}
+        selectedItemId={selectedItemId}
+      />
+      <Separator orientation="vertical" />
+      <FontStyle currentText={currentText} selectedItemId={selectedItemId} />
+      <Separator orientation="vertical" />
+      <FontAlign currentText={currentText} selectedItemId={selectedItemId} />
+      <Separator orientation="vertical" />
+      <FontSizeSelector
+        currentText={currentText}
+        selectedItemId={selectedItemId}
+      />
+      <Separator orientation="vertical" />
+      <input
+        className="my-auto "
+        type="color"
+        onChange={onTextColorChange}
+        value={currentText.fill}
+      />
+      <Separator orientation="vertical" />
+      <SpacingSettings
+        currentText={currentText}
+        selectedItemId={selectedItemId}
+      />
+      <Button onClick={() => deleteTextHandler(selectedItemId)}>
+        Delete Text
+      </Button>
+    </>
+  );
+};