From 8487e8b31f40d8b0a3a8e943e36030987d5d2cb5 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 14 Jun 2022 22:03:59 +0200
Subject: [PATCH] use new tab nav-bar

---
 .../available-versions-slider.component.tsx     | 10 ++++------
 src/renderer/pages/version-viewer.component.tsx | 17 +++++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/available-versions/available-versions-slider.component.tsx b/src/renderer/components/available-versions/available-versions-slider.component.tsx
index 17440e06..18ac41c4 100644
--- a/src/renderer/components/available-versions/available-versions-slider.component.tsx
+++ b/src/renderer/components/available-versions/available-versions-slider.component.tsx
@@ -1,20 +1,18 @@
 import { useEffect, useState } from "react"
 import { BSVersionManagerService } from "../../services/bs-version-manager.service";
-import { useNavigate } from 'react-router-dom'
 import { AvailableVersionsSlide } from "./available-versions-slide.component";
-import { AvailableVersionsNavBar } from "./available-versions-nav-bar.component";
 import { filter, take } from "rxjs";
+import { TabNavBar } from "../shared/tab-nav-bar.component";
 
 export function AvailableVersionsSlider() {
 
-  const navigate = useNavigate();
   const [availableYears, setAvailableYears] = useState([]);
   const [yearIndex, setYearIndex] = useState(0);
 
   const versionManagerService = BSVersionManagerService.getInstance();
 
-  const setSelectedYear = (year: string) => {
-    setYearIndex(availableYears.indexOf(year));
+  const setSelectedYear = (index: number) => {
+    setYearIndex(index);
   }
 
   useEffect(() => {
@@ -26,7 +24,7 @@ export function AvailableVersionsSlider() {
 
   return (
     <div className="w-full h-fit max-h-full relative flex flex-col items-center grow min-h-0">
-      <AvailableVersionsNavBar years={availableYears} setSelectedYear={setSelectedYear}></AvailableVersionsNavBar>
+      <TabNavBar tabsText={availableYears} onTabChange={setSelectedYear}/>
       <div className="w-full min-h-0 flex transition-transform duration-500" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
         { availableYears.map((year, index) =>
           <AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
diff --git a/src/renderer/pages/version-viewer.component.tsx b/src/renderer/pages/version-viewer.component.tsx
index a38aff0d..19480cdd 100644
--- a/src/renderer/pages/version-viewer.component.tsx
+++ b/src/renderer/pages/version-viewer.component.tsx
@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom';
 import { BsDownloaderService } from '../services/bs-downloader.service';
 import { Subscription } from 'rxjs';
 import BSLogo from '../../../assets/bs-logo.png';
-import BeatRunning from '../../../assets/beat-running.png';
 import { BSLauncherService, LaunchResult } from '../services/bs-launcher.service';
+import { TabNavBar } from 'renderer/components/shared/tab-nav-bar.component';
 
 export function VersionViewer() {
 
@@ -63,21 +63,22 @@ export function VersionViewer() {
 
   return (
     <>
-      <img className="absolute w-full h-full top-0 left-0 blur-lg brightness-75 object-cover" src={state.ReleaseImg} alt="" />
+      <img className="absolute w-full h-full top-0 left-0 blur-lg object-cover brightness-90" src={state.ReleaseImg} alt="" />
       <div className="relative flex items-center flex-col w-full h-full text-gray-200">
-        <img className='relative -left-4 object-cover h-28 -top-3' src={BSLogo} alt="" />
-        <h1 className='relative text-4xl font-bold italic -top-7'>{state.BSVersion}</h1>
+        <img className='relative -left-4 object-cover h-28' src={BSLogo} alt="" />
+        <h1 className='relative text-4xl font-bold italic -top-4'>{state.BSVersion}</h1>
+        <TabNavBar tabsText={["Launch", "Maps", "Mods"]} onTabChange={() => console.log()}/>
         <div className='relative flex flex-row justify-center items-center content-center -top-2'>
-          <VersionLunchModButton onClick={() => setMode("oculus", !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
-          <VersionLunchModButton onClick={() => setMode("desktop", !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
-          <VersionLunchModButton onClick={() => setMode("debug", !debugMode)} active={debugMode} text="DEBUG MOD"/>
+          <ToogleLunchMod onClick={() => setMode("oculus", !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
+          <ToogleLunchMod onClick={() => setMode("desktop", !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
+          <ToogleLunchMod onClick={() => setMode("debug", !debugMode)} active={debugMode} text="DEBUG MOD"/>
         </div>
       </div>
     </>
   )
 }
 
-export function VersionLunchModButton(props: {onClick: Function, active: boolean, text: string}) {
+export function ToogleLunchMod(props: {onClick: Function, active: boolean, text: string}) {
   return (
     <span onClick={() => props.onClick()} className={`w-56 text-center cursor-pointer p-3 border-4 border-white rounded-full font-bold italic text-lg tracking-wide ml-3 mr-3 transition-all ${props.active && "bg-white text-black bg-opacity-70"} hover:bg-white hover:bg-opacity-70 hover:text-black`}>{props.text}</span>
   );