zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

simplify

Browse Source
This commit is contained in:
MathieuG-P
2022-07-24 17:12:57 +02:00
parent 86b4b113dc
commit 0355d6f2ed
1 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/tab-nav-bar.component.tsx
+12 -21
View File
@@ -1,12 +1,10 @@
import { useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const tabsWrapper = useRef(null);
const [tabsWidth, setTabsWidth] = useState(0);
const t = useTranslation();
const secondColor = useThemeColor("second-color");
@@ -16,24 +14,17 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
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-black ${props.className}`}>
<div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>
<span className="absolute h-full w-full bg-current brightness-50" />
<span className="absolute h-full block bg-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}/>
<span className="fixed h-1 block shadow-center bg-transparent shadow-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
return (
<div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
<div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>
<span className="absolute h-full w-full bg-current brightness-50" />
<span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
</div>
<div 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-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
)}
</div>
</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-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
)}
</div>
</div>
)
}