From 25c610c65dde3e816f56a73dd5ae4770fbabe308 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Wed, 15 Jun 2022 23:01:40 +0200
Subject: [PATCH] add className props and change animtation duration

---
 src/renderer/components/shared/tab-nav-bar.component.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index 7e5a6543..bcf3bf20 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-export function TabNavBar(props: {tabsText: string[], onTabChange: Function}) {
+export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
 
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
     const tabsWrapper = useRef(null);
@@ -18,11 +18,11 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function}) {
     
 
   return (
-    <div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
+    <div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800 ${props.className}`}>
         <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>
+          <span className="absolute h-full block bg-red-500 transition-transform duration-300 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-300" 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) =>