From f386a008fe5d422901a04159dd16799faaa1d6e2 Mon Sep 17 00:00:00 2001
From: AdityaSingh-02 <asaditya2002@gmail.com>
Date: Wed, 11 Oct 2023 12:18:00 +0530
Subject: [PATCH] add carousel

---
 src/components/Fourth/fourth.tsx   | 29 +++++++++++++++++++++++++----
 src/components/Fourth/reviews.json | 20 ++++++++++++--------
 src/components/Slides/slide.tsx    |  1 +
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/Fourth/fourth.tsx b/src/components/Fourth/fourth.tsx
index 2c90013..77ddf96 100644
--- a/src/components/Fourth/fourth.tsx
+++ b/src/components/Fourth/fourth.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { use, useEffect, useState } from "react";
 import style from "./fourth.module.css";
 import Image from "next/image";
 import { slide as Slide, Props as IRevs } from "../Slides/slide";
@@ -13,11 +13,32 @@ export const Fourth = () => {
     text: "Hello world",
   });
 
+  const [keyId, setKey] = useState<number>(1);
+
   useEffect(() => {
     setTimeout(() => {
-      setReviews(revs.rev1);
-    }, 3000);
-  }, []);
+      getIndex(revs.rev1.key);
+      if (keyId == 1) {
+        setReviews(revs.rev1);
+      } else if (keyId == 2) {
+        setReviews(revs.rev2);
+      } else if (keyId == 3) {
+        setReviews(revs.rev3);
+      } else {
+        setReviews(revs.rev4);
+      }
+    }, 5000);
+  }, [keyId]);
+
+  const getIndex = (num: number) => {
+    setKey((prev)=>{
+      if(prev == 4){
+        return prev = 1
+      }else{
+        return prev +=1;
+      }
+    })
+  };
 
   return (
     <div className={style.fourth}>
diff --git a/src/components/Fourth/reviews.json b/src/components/Fourth/reviews.json
index 8afac42..6b40c07 100644
--- a/src/components/Fourth/reviews.json
+++ b/src/components/Fourth/reviews.json
@@ -1,26 +1,30 @@
 {
     "rev1": {
+        "key":1,
         "im": "/person.png",
-        "name": "joshua",
+        "name": "John Doe",
         "position": "marketing",
-        "text": "Hello this is johua"
+        "text": "Hello this is John Doe"
     },
     "rev2": {
+        "key":2,
         "im": "/person.png",
-        "name": "joshua sam",
+        "name": "Foo",
         "position": "marketing",
-        "text": "Hello this is johua"
+        "text": "Hello this is foo"
     },
     "rev3": {
+        "key":3,
         "im": "/person.png",
-        "name": "joshua singh",
+        "name": "Bar",
         "position": "marketing",
-        "text": "Hello this is johua"
+        "text": "Hello this is Bar"
     },
     "rev4": {
+        "key":4,
         "im": "/person.png",
-        "name": "joshua jodd",
+        "name": "NextJs",
         "position": "marketing",
-        "text": "Hello this is johua"
+        "text": "Hello this is NexTJs"
     }
 }
\ No newline at end of file
diff --git a/src/components/Slides/slide.tsx b/src/components/Slides/slide.tsx
index 28bcb12..fef2b41 100644
--- a/src/components/Slides/slide.tsx
+++ b/src/components/Slides/slide.tsx
@@ -8,6 +8,7 @@ export interface Props {
     name: string;
     position: string;
     text: string;
+    key?: number;
 }
 
 export const slide = (props: Props) => {