From 43cdcbf7651ac629fad0f537dcba9a08e75a871c Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 1 Nov 2022 23:04:39 +0100
Subject: [PATCH] add maps and playlist slide

---
 .../maps-playlists-panel.component.tsx            | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
index 390a7ccc..2883585e 100644
--- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react"
+import { MapsManagerService } from "renderer/services/maps-manager.service"
 import { BSVersion } from "shared/bs-version.interface"
 import { TabNavBar } from "../shared/tab-nav-bar.component"
 
@@ -6,9 +8,18 @@ type Props = {
 }
 
 export function MapsPlaylistsPanel({version}: Props) {
+
+    const [tabIndex, setTabIndex] = useState(0);
+
+    console.log(tabIndex);
+
     return (
         <div className="w-full h-full bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden">
-            <TabNavBar className="!rounded-none shadow-none" tabsText={["Maps", "Playlists"]} onTabChange={() => {}}/>
-        </div>
+            <TabNavBar className="!rounded-none shadow-sm" tabsText={["Maps", "Playlists"]} onTabChange={setTabIndex}/>
+            <div className="w-full h-full flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
+                <div className="w-full h-full grow bg-red-300 shrink-0">a</div>
+                <div className="w-full h-full bg-green-300 shrink-0">b</div>
+            </div>
+        </div> 
     )
 }