add bs note icon

src/renderer/components/available-versions-array.component.tsx

@@ -1,11 +1,11 @@
 import { BSVersion } from "../../main/services/bs-version-manager.service"
 import { useEffect, useState } from "react"
 
-export function AvailableVersionsArray({versions}: {versions: BSVersion[]}) {
+export function AvailableVersionsArray({versions, setSelectedVersion}: {versions: BSVersion[], setSelectedVersion: Function}) {
 
   const [versionsMap, setVersionsMap] = useState(new Map<string, BSVersion[]>())
 
-  console.log(versions);
+  console.log(setSelectedVersion);
 
   useEffect(() => {
     organiseVersions()
@@ -25,7 +25,7 @@ export function AvailableVersionsArray({versions}: {versions: BSVersion[]}) {
 
   return (
     <div>
-      { versions.map(v => <button className="bg-gray-200 m-2">{v.BSVersion}</button>) }
+      { versions.map((v, index) => <button onClick={() => setSelectedVersion(v)} key={index} className="bg-gray-200 m-2">{v.BSVersion}</button>) }
     </div>
   )
 }

src/renderer/components/nav-bar/bs-version-item.component.tsx

@@ -1,10 +1,12 @@
 import { BSVersion } from "main/services/bs-version-manager.service";
+import bsNote from '../../../../assets/bs-note-fill.svg'
 import { Link } from "react-router-dom";
 
 export default function BsVersionItem(props: {version: BSVersion}) {
   return (
-    <div className='w-full h-fit pl-1 pr-1 cursor-pointer'>
-        <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="block w-full flex justify-center items-center content-center text-lg text-gray-200 font-bold">{props.version.BSVersion}</Link>
+    <div className='cursor-pointer flex'>
+        <img src={bsNote} alt="" className="inline w-7 aspect-square min-w-0" />
+        <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="inline w-max text-lg text-gray-200 font-bold min-w-0">{props.version.BSVersion}</Link>
     </div>
   )
 }

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -10,14 +10,14 @@ export function NavBar() {
   const { installedVersions }: {installedVersions: BSVersion[]} = useSelector((state: any) => state.installedBSReducer);
 
   return (
-    <div id='nav-bar' className='z-10 flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
+    <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-2 bg-gray-200 dark:bg-[#202225]'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <div className='relative aspect-square w-16'>
           <span id='logo-bottom' className='bg-blue-500 aspect-square w-16'> </span>
           <span id='logo-top' className='bg-red-500 aspect-square w-16'> </span>
         </div>
       </div>
-      <div id='versions' className='relative w-full left-[2px] grow overflow-y-hidden scrollbar-th scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
+      <div id='versions' className='relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
         {installedVersions.map((version, index) => <BsVersionItem key={index} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>

src/renderer/pages/available-versions-list.components.tsx

@@ -1,17 +1,46 @@
 import { BSVersion } from "../../main/services/bs-version-manager.service";
 import { useSelector } from "react-redux";
 import { AvailableVersionsArray } from "renderer/components/available-versions-array.component";
+import { useState } from "react";
 
 export function AvailableVersionsList() {
 
   const { availableVersions }: {availableVersions: BSVersion[]} = useSelector((state: any) => state.availableBsReducer);
 
+  const [versionSelected, setVersionSelected] = useState(null as BSVersion);
+  const [needIds, setNeedIds] = useState(false);
+  const [stay, setStay] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const selectedVersionCallback = (v: BSVersion) => {
+    setVersionSelected(v);
+  }
+
+  const startInstall = (username = localStorage.getItem("username")) => {
+    if(!username){ setNeedIds(true); return; }
+    localStorage.setItem("username", username);
+  }
+
   console.log(availableVersions);
 
   return (
     <div>
-      <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh">CHOOSE BS VERSION</h1>
-      {availableVersions && <AvailableVersionsArray versions={availableVersions}/>}
+      <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh mb-5">CHOOSE BS VERSION</h1>
+      {availableVersions && <AvailableVersionsArray versions={availableVersions} setSelectedVersion={selectedVersionCallback}/>}
+      { versionSelected && (
+        <>
+          <h1 className="w-full text-2xl text-gray-200 font-bold text-center mt-5">SELECTED : {versionSelected.BSVersion}</h1>
+          <div className="w-full flex flex-col justify-center items-center content-center">
+            <button onClick={() => startInstall()} className="m-4 bg-white text-xl font-bold p-3">INSTALL</button>
+            <button className="m-4 bg-white text-xl font-bold p-3">VERSION NOTES</button>
+          </div>
+          { needIds && <input onChange={(e) => setUsername(e.target.value)} value={username} type="text" name="" id="" placeholder="username"/> }
+          { needIds && <input onChange={(e) => setPassword(e.target.value)} value={password} type="password" name="" id="" placeholder="password"/> }
+          { needIds && (<> <label htmlFor="stay">STAY</label> <input onChange={(e) => setStay(e.target.checked)} checked={stay} id="stay" type="checkbox"/>  </>) }
+          { needIds && <button onClick={() => startInstall(username)}>SUBMIT</button> }
+        </>
+      )}
     </div>
   )
 }