From 48ac0e52186da59684a350f2499a60047f6a365f Mon Sep 17 00:00:00 2001
From: Anastasiya <melichkaowen1@gmail.com>
Date: Wed, 21 Aug 2024 16:43:01 +0300
Subject: [PATCH] feat: move the display change as a new component

---
 .../ViewModeToggle/ViewModeToggle.styled.ts   |  0
 .../ViewModeToggle/ViewModeToggle.tsx         | 22 +++++++++++++++++++
 .../src/components/ViewModeToggle/index.ts    |  1 +
 3 files changed, 23 insertions(+)
 create mode 100644 application/frontend/src/components/ViewModeToggle/ViewModeToggle.styled.ts
 create mode 100644 application/frontend/src/components/ViewModeToggle/ViewModeToggle.tsx
 create mode 100644 application/frontend/src/components/ViewModeToggle/index.ts

diff --git a/application/frontend/src/components/ViewModeToggle/ViewModeToggle.styled.ts b/application/frontend/src/components/ViewModeToggle/ViewModeToggle.styled.ts
new file mode 100644
index 0000000..e69de29
diff --git a/application/frontend/src/components/ViewModeToggle/ViewModeToggle.tsx b/application/frontend/src/components/ViewModeToggle/ViewModeToggle.tsx
new file mode 100644
index 0000000..01a4b88
--- /dev/null
+++ b/application/frontend/src/components/ViewModeToggle/ViewModeToggle.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+
+import ViewListIcon from "@mui/icons-material/ViewList"
+import ViewModuleIcon from "@mui/icons-material/ViewModule"
+import { IconButton } from "@mui/material"
+
+interface ViewModeToggleProps {
+  viewMode: "list" | "grid"
+  onToggleViewMode: () => void
+}
+
+export const ViewModeToggle: React.FC<ViewModeToggleProps> = ({ viewMode, onToggleViewMode }) => {
+  return (
+    <div>
+      <IconButton onClick={onToggleViewMode}>
+        {viewMode === "list" ? <ViewModuleIcon /> : <ViewListIcon />}
+      </IconButton>
+    </div>
+  )
+}
+
+export default ViewModeToggle
diff --git a/application/frontend/src/components/ViewModeToggle/index.ts b/application/frontend/src/components/ViewModeToggle/index.ts
new file mode 100644
index 0000000..f4d59a9
--- /dev/null
+++ b/application/frontend/src/components/ViewModeToggle/index.ts
@@ -0,0 +1 @@
+export { ViewModeToggle } from "./ViewModeToggle"