fix: adjust name of the toggle button

src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleButton } from "./ToggleButton";
+import { action } from "@storybook/addon-actions";
+
+export type Story = StoryObj<typeof ToggleButton>;
+
+const meta: Meta<typeof ToggleButton> = {
+  title: "Components/ToggleButton",
+  component: ToggleButton,
+  argTypes: {
+    isSaved: { control: "boolean" },
+    onToggle: { action: "mode changed" },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+export const PlusButton: Story = {
+  args: {
+    isSaved: true,
+    onToggle: action("mode changed"),
+  },
+};
+
+export const MinusButton: Story = {
+  args: {
+    isSaved: false,
+    onToggle: action("mode changed"),
+  },
+};

src/components/ToggleButton/ToggleButton.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+test('renders Togglebutton', () => {
+  const { getByTestId } = render(<ToggleButton isSaved={true} onToggle={() => (true)} />);
+  const element = getByTestId("toggleButton");
+  expect(element).toBeInTheDocument();
+});

src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,14 @@
+import { CircleMinus, CirclePlus } from "lucide-react";
+
+type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};
+
+export const ToggleButton = ({ isSaved, onToggle }: ToggleButtonProps) => {
+  return (
+    <div data-testid="toggleButton" onClick={() => onToggle(!isSaved)}>
+      {isSaved ? ( <CircleMinus color="#ffffff" /> ) : ( <CirclePlus color="#ffffff" /> )}
+    </div>
+  );
+};

src/components/ToggleButton/index.ts

@@ -0,0 +1,3 @@
+import { ToggleButton } from "./ToggleButton"
+
+export { ToggleButton }

src/components/ToggleButton/types.ts

@@ -0,0 +1,4 @@
+export type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};