From 9c13c7830a3a9cad87cfbec8712b733406cd7d84 Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Fri, 3 Jun 2022 22:01:17 +0200
Subject: [PATCH] slideshow component

---
 .../slideshow/slideshow.component.css         | 24 +++++++++++++++++++
 .../slideshow/slideshow.component.tsx         | 11 +++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/renderer/components/slideshow/slideshow.component.css
 create mode 100644 src/renderer/components/slideshow/slideshow.component.tsx

diff --git a/src/renderer/components/slideshow/slideshow.component.css b/src/renderer/components/slideshow/slideshow.component.css
new file mode 100644
index 00000000..67361de0
--- /dev/null
+++ b/src/renderer/components/slideshow/slideshow.component.css
@@ -0,0 +1,24 @@
+.slide{
+  overflow: hidden;
+}
+
+.slide > img{
+  animation: slide 50s infinite linear;
+  opacity: 0;
+  position: absolute;
+}
+
+@keyframes slide {
+  5% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+  }
+  40% {
+    transform: scale(1.2);
+  }
+}
diff --git a/src/renderer/components/slideshow/slideshow.component.tsx b/src/renderer/components/slideshow/slideshow.component.tsx
new file mode 100644
index 00000000..37d44681
--- /dev/null
+++ b/src/renderer/components/slideshow/slideshow.component.tsx
@@ -0,0 +1,11 @@
+import './slideshow.component.css';
+
+export function Slideshow(props: {className: string, images: string[]}) {
+  return (
+    <div className={`slide ${props.className}`}>
+      {
+        props.images.map((i, index) => <img key={index} className='w-full h-full object-cover' src={i} style={{animationDelay: `${index * 10}s`}}></img>)
+      }
+    </div>
+  )
+}