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

add className props and change animtation duration

Browse Source
This commit is contained in:
MathieuG-P
2022-06-15 23:01:40 +02:00
parent 6c86beb634
commit 25c610c65d
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/tab-nav-bar.component.tsx
+4 -4
View File
@@ -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) =>