From 1c1cb180cc254cb16c1e1f5be01c1364a4463dc6 Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Sat, 4 Jun 2022 22:24:29 +0200
Subject: [PATCH] use already blured images, and use new components to display
 available BS versions

---
 .../available-versions-list.components.tsx    | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index 4206cdec..ad019eb0 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -1,5 +1,5 @@
 import { BSVersion } from "../../main/services/bs-version-manager.service";
-import { AvailableVersionsArray } from "../components/available-versions-array.component";
+import { AvailableVersionsSlider } from "../components/available-versions/available-versions-slider.component";
 import { useState } from "react";
 import { BsDownloaderService } from "../services/bs-downloader.service";
 import { Slideshow } from "renderer/components/slideshow/slideshow.component";
@@ -7,17 +7,16 @@ import { Slideshow } from "renderer/components/slideshow/slideshow.component";
 export function AvailableVersionsList() {
 
   const slideshowImages = [
-    require('../../../assets/slideshow-images/image-1.jpg'),
-    require('../../../assets/slideshow-images/image-2.jpg'),
-    require('../../../assets/slideshow-images/image-3.jpg'),
-    require('../../../assets/slideshow-images/image-4.jpg'),
-    require('../../../assets/slideshow-images/image-5.png'),
-    require('../../../assets/slideshow-images/image-6.png'),
-    require('../../../assets/slideshow-images/image-7.png'),
+    require('../../../assets/slideshow-images/image-1-blur.jpg'),
+    require('../../../assets/slideshow-images/image-2-blur.jpg'),
+    require('../../../assets/slideshow-images/image-3-blur.jpg'),
+    require('../../../assets/slideshow-images/image-4-blur.jpg'),
+    require('../../../assets/slideshow-images/image-5-blur.png'),
+    require('../../../assets/slideshow-images/image-6-blur.png'),
+    require('../../../assets/slideshow-images/image-7-blur.png'),
   ];
 
   const [versionSelected, setVersionSelected] = useState(null as BSVersion);
-
   const bsDownloaderService: BsDownloaderService = BsDownloaderService.getInstance();
 
   const selectedVersionCallback = (v: BSVersion) => {
@@ -30,19 +29,10 @@ export function AvailableVersionsList() {
 
   return (
     <div>
-      <Slideshow className="absolute w-full h-full top-0 brightness-[.65] blur-md" images={slideshowImages}></Slideshow>
+      <Slideshow className="absolute w-full h-full top-0" images={slideshowImages}></Slideshow>
       <div className=" relative z-[1]">
-        <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>
-        <AvailableVersionsArray 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>
-          </>
-        )}
+        <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh mb-5">SELECT A VERSION</h1>
+        <AvailableVersionsSlider setSelectedVersion={selectedVersionCallback}/>
       </div>
     </div>
   )