From 05849360d596975c86389a08ffd7a8e26b0fc8cb Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Sun, 23 Jun 2024 19:53:17 +0200
Subject: [PATCH] [RSN-62] - Implemented slider for hero section (#78)

* feat: implemented slider for hero section

* feat: fixed overflow issues
---
 .../src/components/web/main/HeroSection.tsx   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
index a6424a94..76ac3384 100644
--- a/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
+++ b/Client/reasn-client/packages/ui/src/components/web/main/HeroSection.tsx
@@ -1,8 +1,11 @@
-import React from "react";
-import { Fire } from "@reasn/ui/src/icons";
+import React, { useState } from "react";
+import { ArrowLeft, ArrowRight, Fire } from "@reasn/ui/src/icons";
 import { Card, CardVariant } from "@reasn/ui/src/components/shared";
 
 export const HeroSection = () => {
+  const [currentCardIdx, setCurrentCardIdx] = useState(0);
+  const [cards, setCards] = useState<number[]>([0, 1, 2, 3, 4, 5]);
+
   return (
     <section className="flex h-[50vh] w-full flex-col items-center justify-center gap-[10%] lg:flex-row">
       <div className="relative z-10 hidden h-1/3 w-fit lg:block">
@@ -16,9 +19,30 @@ export const HeroSection = () => {
           to jest teraz <br /> na topie
         </h2>
       </div>
-      <div className="relative">
+      <div className="relative h-[30vh] w-[30vw] ">
         <div className='absolute right-[-25%] top-[-50%] z-0 h-[200%] w-[150%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-5 blur-3xl content-[""]'></div>
-        <Card variant={CardVariant.Big} event={"edit"} />
+        <div className="w-full h-full overflow-hidden">
+          <div
+            className="flex h-full w-full gap-0 duration-300"
+            style={{ transform: `translateX(-${currentCardIdx * 100}%)` }}
+          >
+            {cards.map((card, idx) => (
+              <Card key={card} variant={CardVariant.Big} event={"edit"} />
+            ))}
+          </div>
+        </div>
+        {currentCardIdx > 0 && (
+          <ArrowLeft
+            onClick={() => setCurrentCardIdx(currentCardIdx - 1)}
+            className="absolute left-[-3rem] top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+          />
+        )}
+        {currentCardIdx < cards.length - 1 && (
+          <ArrowRight
+            onClick={() => setCurrentCardIdx((idx) => idx + 1)}
+            className="absolute right-[-3rem] top-[50%] z-20 h-8 w-8 -translate-y-1/2 cursor-pointer rounded-lg bg-gradient-to-r from-[#32346A7d] to-[#4E4F757d] fill-white p-2"
+          />
+        )}
       </div>
     </section>
   );