From 821e487c93c4554a6418f2b7e11dbd4b1ea0c761 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Thu, 17 Nov 2022 00:07:46 +0100
Subject: [PATCH] prototype of maps searchbar

---
 .../maps-playlists-panel.component.tsx        | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 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 f861bc98..3a7b4782 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,7 +1,9 @@
 import { useState } from "react"
 import { BSVersion } from "shared/bs-version.interface"
 import { TabNavBar } from "../shared/tab-nav-bar.component"
+import { BsmIcon } from "../svgs/bsm-icon.component"
 import { LocalMapsListPanel } from "./local-maps-list-panel.component"
+import {AnimatePresence, motion} from "framer-motion"
 
 type Props = {
     oneBlock?: boolean,
@@ -15,13 +17,32 @@ export function MapsPlaylistsPanel({version, oneBlock = false}: Props) {
     return (
         <>
         {!oneBlock && <TabNavBar className="mb-8 w-72" tabsText={["Maps", "Playlists"]} onTabChange={setTabIndex}/>}
-        <div className="w-full h-full flex flex-col bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
-            {oneBlock && <TabNavBar className="!rounded-none shadow-sm" tabsText={["Maps", "Playlists"]} onTabChange={setTabIndex}/>}
-            <div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
-                <LocalMapsListPanel className="w-full h-full shrink-0 flex flex-col" version={version}/>
+        <div className="w-full h-full flex flex-col items-center justify-center">
+            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 mb-3">
+                <motion.div layout className="h-full rounded-full bg-main-color-2 grow flex items-center gap-1 px-2">
+                    <input type="text" name="" id="" className="bg-main-color-1 rounded-full grow px-2" placeholder="Rechercher" />
+                    <BsmIcon className="h-full w-fit py-1" icon="trash"/>
+                </motion.div>
+                <AnimatePresence mode="popLayout">
+                    {tabIndex === 0 && (
+                        <motion.div layout className="h-full rounded-full bg-main-color-2 flex justify-center items-center px-2" initial={{scale: tabIndex === 0 ? 1 : 0}} animate={{scale: tabIndex === 0 ? 1 : 0}} exit={{scale: 0}}>
+                            <BsmIcon className="h-full w-fit py-1" icon="trash"/>
+                            <span>Filtres</span>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+                
+            </nav>
+            <div className="w-full h-full flex flex-col bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
+                {oneBlock && <TabNavBar className="!rounded-none shadow-sm" tabsText={["Maps", "Playlists"]} onTabChange={setTabIndex}/>}
+                <div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
+                    <LocalMapsListPanel className="w-full h-full shrink-0 flex flex-col" version={version}/>
                 <div className="w-full h-full grow shrink-0">b</div>
             </div>
         </div> 
+
+        </div>
+        
         </>
     )
 }