From 165c1cc63f77b612afb647c8c270482b5049378b Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 14 Jun 2022 22:03:38 +0200
Subject: [PATCH] make bs versions tab nav-bar as re-usable component

---
 .../available-versions-nav-bar.component.tsx  | 24 -------------
 .../shared/tab-nav-bar.component.tsx          | 35 +++++++++++++++++++
 2 files changed, 35 insertions(+), 24 deletions(-)
 delete mode 100644 src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
 create mode 100644 src/renderer/components/shared/tab-nav-bar.component.tsx

diff --git a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx b/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
deleted file mode 100644
index c491bc25..00000000
--- a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useState } from "react"
-
-export function AvailableVersionsNavBar(props: {years: string[], setSelectedYear: Function}) {
-
-  const [selectedYearIndex, setSelectedYearIndex] = useState(0);
-
-  const selectYear = (year: string) => {
-    setSelectedYearIndex(props.years.indexOf(year));
-    props.setSelectedYear(year);
-  }
-
-  return (
-      <div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
-        <div className="absolute w-full h-1 bottom-0">  
-          <span className="absolute h-full w-full bg-red-500 brightness-50"></span>
-          <span className="absolute h-full block w-20 bg-red-500 transition-transform duration-500 shadow-lg shadow-red-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
-          <span className="fixed h-1 block w-20 shadow-center bg-transparent shadow-red-500 transition-transform duration-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
-        </div>
-        { props.years.map((y, index) => 
-          <span className="w-20 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
-        )}
-      </div>
-  )
-}
diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
new file mode 100644
index 00000000..7e5a6543
--- /dev/null
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from "react";
+
+export function TabNavBar(props: {tabsText: string[], onTabChange: Function}) {
+
+    const [currentTabIndex, setCurrentTabIndex] = useState(0);
+    const tabsWrapper = useRef(null);
+    const [tabsWidth, setTabsWidth] = useState(0);
+
+    const selectYear = (tab: string) => {
+        const newIndex = props.tabsText.indexOf(tab);
+        setCurrentTabIndex(newIndex);
+        props.onTabChange(newIndex);
+    }
+
+    useEffect(() => {
+        setTimeout(() => { if(tabsWrapper?.current?.children?.length){ setTabsWidth(tabsWrapper.current.children[0].clientWidth);} }, 20) //Ugly but only that works well ¯\_(ツ)_/¯ 
+    }, [props.tabsText])
+    
+
+  return (
+    <div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
+        <div className="absolute w-full h-1 bottom-0">  
+          <span className="absolute h-full w-full bg-red-500 brightness-50"></span>
+          <span className="absolute h-full block bg-red-500 transition-transform duration-500 shadow-lg shadow-red-500" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
+          <span className="fixed h-1 block shadow-center bg-transparent shadow-red-500 transition-transform duration-500" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
+        </div>
+        <div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
+            { props.tabsText.map((y, index) => 
+                <span className="pr-4 pl-4 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
+            )}
+        </div>
+        
+      </div>
+  )
+}