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

use new tab nav-bar

Browse Source
This commit is contained in:
MathieuG-P
2022-06-14 22:03:59 +02:00
parent 165c1cc63f
commit 8487e8b31f
2 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/available-versions/available-versions-slider.component.tsx
+4 -6
View File
@@ -1,20 +1,18 @@
import { useEffect, useState } from "react"
import { BSVersionManagerService } from "../../services/bs-version-manager.service";
import { useNavigate } from 'react-router-dom'
import { AvailableVersionsSlide } from "./available-versions-slide.component";
import { AvailableVersionsNavBar } from "./available-versions-nav-bar.component";
import { filter, take } from "rxjs";
import { TabNavBar } from "../shared/tab-nav-bar.component";
export function AvailableVersionsSlider() {
const navigate = useNavigate();
const [availableYears, setAvailableYears] = useState([]);
const [yearIndex, setYearIndex] = useState(0);
const versionManagerService = BSVersionManagerService.getInstance();
const setSelectedYear = (year: string) => {
setYearIndex(availableYears.indexOf(year));
const setSelectedYear = (index: number) => {
setYearIndex(index);
}
useEffect(() => {
@@ -26,7 +24,7 @@ export function AvailableVersionsSlider() {
return (
<div className="w-full h-fit max-h-full relative flex flex-col items-center grow min-h-0">
<AvailableVersionsNavBar years={availableYears} setSelectedYear={setSelectedYear}></AvailableVersionsNavBar>
<TabNavBar tabsText={availableYears} onTabChange={setSelectedYear}/>
<div className="w-full min-h-0 flex transition-transform duration-500" style={{transform: `translate(${-(yearIndex * 100)}%, 0)`}}>
{ availableYears.map((year, index) =>
<AvailableVersionsSlide key={index} year={year}></AvailableVersionsSlide>
src/renderer/pages/version-viewer.component.tsx
+9 -8
View File
@@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom';
import { BsDownloaderService } from '../services/bs-downloader.service';
import { Subscription } from 'rxjs';
import BSLogo from '../../../assets/bs-logo.png';
import BeatRunning from '../../../assets/beat-running.png';
import { BSLauncherService, LaunchResult } from '../services/bs-launcher.service';
import { TabNavBar } from 'renderer/components/shared/tab-nav-bar.component';
export function VersionViewer() {
@@ -63,21 +63,22 @@ export function VersionViewer() {
return (
<>
<img className="absolute w-full h-full top-0 left-0 blur-lg brightness-75 object-cover" src={state.ReleaseImg} alt="" />
<img className="absolute w-full h-full top-0 left-0 blur-lg object-cover brightness-90" src={state.ReleaseImg} alt="" />
<div className="relative flex items-center flex-col w-full h-full text-gray-200">
<img className='relative -left-4 object-cover h-28 -top-3' src={BSLogo} alt="" />
<h1 className='relative text-4xl font-bold italic -top-7'>{state.BSVersion}</h1>
<img className='relative -left-4 object-cover h-28' src={BSLogo} alt="" />
<h1 className='relative text-4xl font-bold italic -top-4'>{state.BSVersion}</h1>
<TabNavBar tabsText={["Launch", "Maps", "Mods"]} onTabChange={() => console.log()}/>
<div className='relative flex flex-row justify-center items-center content-center -top-2'>
<VersionLunchModButton onClick={() => setMode("oculus", !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
<VersionLunchModButton onClick={() => setMode("desktop", !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
<VersionLunchModButton onClick={() => setMode("debug", !debugMode)} active={debugMode} text="DEBUG MOD"/>
<ToogleLunchMod onClick={() => setMode("oculus", !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
<ToogleLunchMod onClick={() => setMode("desktop", !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
<ToogleLunchMod onClick={() => setMode("debug", !debugMode)} active={debugMode} text="DEBUG MOD"/>
</div>
</div>
</>
)
}
export function VersionLunchModButton(props: {onClick: Function, active: boolean, text: string}) {
export function ToogleLunchMod(props: {onClick: Function, active: boolean, text: string}) {
return (
<span onClick={() => props.onClick()} className={`w-56 text-center cursor-pointer p-3 border-4 border-white rounded-full font-bold italic text-lg tracking-wide ml-3 mr-3 transition-all ${props.active && "bg-white text-black bg-opacity-70"} hover:bg-white hover:bg-opacity-70 hover:text-black`}>{props.text}</span>
);