From b5c69a2d3f4f890786a4f3467c3a5f2223132c5d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:08:44 -0300
Subject: [PATCH] Extract ModeTaab component

---
 src/components/ModeTab.tsx  | 16 ++++++++++++++++
 src/transaction/Details.tsx | 31 ++++---------------------------
 2 files changed, 20 insertions(+), 27 deletions(-)
 create mode 100644 src/components/ModeTab.tsx

diff --git a/src/components/ModeTab.tsx b/src/components/ModeTab.tsx
new file mode 100644
index 0000000..14a33fd
--- /dev/null
+++ b/src/components/ModeTab.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Tab } from "@headlessui/react";
+
+const ModeTab: React.FC = ({ children }) => (
+  <Tab
+    className={({ selected }) =>
+      `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+        selected ? "border-blue-300" : ""
+      }`
+    }
+  >
+    {children}
+  </Tab>
+);
+
+export default ModeTab;
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index f2cebce..9f55c3a 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -30,6 +30,7 @@ import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
+import ModeTab from "../components/ModeTab";
 import DecodedInput from "./DecodedInput";
 
 type DetailsProps = {
@@ -315,33 +316,9 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="Input Data">
         <Tab.Group>
           <Tab.List className="flex space-x-1 mb-1">
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              Decoded
-            </Tab>
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              Raw
-            </Tab>
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              UTF-8
-            </Tab>
+            <ModeTab>Decoded</ModeTab>
+            <ModeTab>Raw</ModeTab>
+            <ModeTab>UTF-8</ModeTab>
           </Tab.List>
           <Tab.Panels>
             <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>