From 3a15fd977c33369392d4ea0a41c33b305107c109 Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Sat, 4 Jun 2022 22:22:00 +0200
Subject: [PATCH] create available versions slide

---
 .../available-versions-slide.component.tsx    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/renderer/components/available-versions/available-versions-slide.component.tsx

diff --git a/src/renderer/components/available-versions/available-versions-slide.component.tsx b/src/renderer/components/available-versions/available-versions-slide.component.tsx
new file mode 100644
index 00000000..2b0a687d
--- /dev/null
+++ b/src/renderer/components/available-versions/available-versions-slide.component.tsx
@@ -0,0 +1,32 @@
+import { BSVersion } from "main/services/bs-version-manager.service";
+import { useEffect, useState } from "react"
+import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
+import { filter, take } from "rxjs";
+import { AvailableVersionItem } from "./available-version-item.component";
+
+export function AvailableVersionsSlide(props: {year: string}) {
+
+  const [availableVersions, setAvailableVersions] = useState([] as BSVersion[]);
+
+  const versionsService = BSVersionManagerService.getInstance();
+
+  console.log("*** AVAILABLE VERISON");
+  console.log(availableVersions);
+
+  useEffect(() => {
+    versionsService.availableVersions$.pipe(filter(versions => !!versions?.length), take(1)).subscribe(() => {
+      setAvailableVersions(versionsService.getAvaibleVersionsOfYear(props.year));
+    });
+  }, [])
+
+
+  return (
+    <div className="w-full max-w-full h-fit shrink-0 flex items-center justify-center content-center">
+      <div className="flex justify-center items-center content-center flex-wrap max-w-6xl">
+        {availableVersions.map((version, index) =>
+          <AvailableVersionItem key={index} version={version}></AvailableVersionItem>
+        )}
+      </div>
+    </div>
+  )
+}