From 4e7ece13c531000a4050bed626e2e7b16c7efd35 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:39:20 +0700
Subject: [PATCH] wip

---
 .../app/components/ExplorerSwitchButton.tsx   | 65 +++++++++++++++++++
 explorer-nextjs/app/page.tsx                  |  6 ++
 2 files changed, 71 insertions(+)
 create mode 100644 explorer-nextjs/app/components/ExplorerSwitchButton.tsx

diff --git a/explorer-nextjs/app/components/ExplorerSwitchButton.tsx b/explorer-nextjs/app/components/ExplorerSwitchButton.tsx
new file mode 100644
index 0000000000..f9a1508cd5
--- /dev/null
+++ b/explorer-nextjs/app/components/ExplorerSwitchButton.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+
+interface TwoSidedSwitchProps {
+  leftLabel: string; // Label for the left side
+  rightLabel: string; // Label for the right side
+  onSwitch?: (side: "left" | "right") => void; // Callback when switched
+}
+
+const TwoSidedSwitch: React.FC<TwoSidedSwitchProps> = ({
+  leftLabel,
+  rightLabel,
+  onSwitch,
+}) => {
+  const [selectedSide, setSelectedSide] = useState<"left" | "right">("left");
+
+  const handleSwitch = (side: "left" | "right") => {
+    setSelectedSide(side);
+    if (onSwitch) onSwitch(side);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        borderRadius: "8px",
+        overflow: "hidden",
+        width: "200px",
+        height: "40px",
+        border: "2px solid black",
+      }}
+    >
+      <Button
+        onClick={() => handleSwitch("left")}
+        sx={{
+          flex: 1,
+          backgroundColor: selectedSide === "left" ? "black" : "white",
+          color: selectedSide === "left" ? "white" : "black",
+          borderRadius: 0,
+          "&:hover": {
+            backgroundColor: selectedSide === "left" ? "black" : "lightgray",
+          },
+        }}
+      >
+        {leftLabel}
+      </Button>
+      <Button
+        onClick={() => handleSwitch("right")}
+        sx={{
+          flex: 1,
+          backgroundColor: selectedSide === "right" ? "black" : "white",
+          color: selectedSide === "right" ? "white" : "black",
+          borderRadius: 0,
+          "&:hover": {
+            backgroundColor: selectedSide === "right" ? "black" : "lightgray",
+          },
+        }}
+      >
+        {rightLabel}
+      </Button>
+    </Box>
+  );
+};
+
+export default TwoSidedSwitch;
diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx
index 2f0b145113..c0027157a5 100644
--- a/explorer-nextjs/app/page.tsx
+++ b/explorer-nextjs/app/page.tsx
@@ -24,6 +24,7 @@ import {
   AccountStatsCard,
   IAccountStatsCardProps,
 } from "./components/AccountStatsCard";
+import TwoSidedSwitch from "./components/ExplorerSwitchButton";
 
 // type ContentCardProps = {
 //   overTitle?: string;
@@ -305,6 +306,11 @@ export default function PageOverview() {
   } = useMainContext();
   return (
     <Box component="main" sx={{ flexGrow: 1 }}>
+      <TwoSidedSwitch
+        leftLabel="Account"
+        rightLabel="Mixnode"
+        onSwitch={() => {}}
+      />
       <Grid>
         <Grid item paddingBottom={3}>
           <Title text="Overview" />