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

make bs versions tab nav-bar as re-usable component

Browse Source
This commit is contained in:
MathieuG-P
2022-06-14 22:03:38 +02:00
parent a2fea18b6d
commit 165c1cc63f
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
-24
View File
@@ -1,24 +0,0 @@
import { useState } from "react"
export function AvailableVersionsNavBar(props: {years: string[], setSelectedYear: Function}) {
const [selectedYearIndex, setSelectedYearIndex] = useState(0);
const selectYear = (year: string) => {
setSelectedYearIndex(props.years.indexOf(year));
props.setSelectedYear(year);
}
return (
<div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
<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 w-20 bg-red-500 transition-transform duration-500 shadow-lg shadow-red-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
<span className="fixed h-1 block w-20 shadow-center bg-transparent shadow-red-500 transition-transform duration-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
</div>
{ props.years.map((y, index) =>
<span className="w-20 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
)}
</div>
)
}
src/renderer/components/shared/tab-nav-bar.component.tsx
+35
View File
@@ -0,0 +1,35 @@
import { useEffect, useRef, useState } from "react";
export function TabNavBar(props: {tabsText: string[], onTabChange: Function}) {
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const tabsWrapper = useRef(null);
const [tabsWidth, setTabsWidth] = useState(0);
const selectYear = (tab: string) => {
const newIndex = props.tabsText.indexOf(tab);
setCurrentTabIndex(newIndex);
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-gray-800">
<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>
</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-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
)}
</div>
</div>
)
}