fix(carousel): Fix carousel transition

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.3.5",
     "eslint": "^8.43.0",
     "eslint-config-react-app": "^7.0.1",
+    "flowbite-react": "^0.6.4",
     "formik": "^2.2.9",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.0",

src/App.js

@@ -8,20 +8,20 @@ import RequiresAuth from "./components/RequiresAuth";
 import { HomePageUser } from "./pages/HomePageUser";
 import Navbar from "./components/Navbar/Navbar";
 import ContactForm from "./pages/Contact";
-import { Carousel } from "./components/Carousel/Carousel";
+import { DefaultCarousel } from "./components/Carousel/Carousel";
 import UserList from "./pages/Users";
 
 function App() {
   return (
     <div className="bg-cover bg-gray-200 h-screen w-screen overflow-y-scroll">
       <PostProvider>
         <Navbar />
-        <Carousel />
+
         <Routes>
           {/* Public routes */}
           <Route path="signup" exact element={<Signup /> } />
           <Route path="login" exact element={<Login />} />
-          <Route path="/" exact element={<HomePageUser />} />
+          <Route path="/" exact element={<HomePageWithCarousel />} />
           <Route path="/contact" exact element={<ContactForm />} />
 
           {/* Private routes */}
@@ -40,5 +40,12 @@ function App() {
     </div>
   );
 }
-
+function HomePageWithCarousel() {
+  return (
+    <>
+      <DefaultCarousel />
+      <HomePageUser />
+    </>
+  );
+}
 export default App;

src/components/Carousel/Carousel.jsx

@@ -1,74 +1,32 @@
-import React, { useState } from "react";
-import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
-import { RxDotFilled } from "react-icons/rx";
-import { useLocation } from "react-router-dom";
-export function Carousel() {
-  const slides = [
-    {
-      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1",
-    },
-    {
-      url: "https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1",
-    },
-    {
-      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1",
-    },
+'use client';
 
-    {
-      url: "https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80",
-    },
-    {
-      url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1",
-    },
-  ];
+import { Carousel } from 'flowbite-react';
 
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const prevSlide = () => {
-    const isFirstSlide = currentIndex === 0;
-    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
-    setCurrentIndex(newIndex);
-  };
-
-  const nextSlide = () => {
-    const isLastSlide = currentIndex === slides.length - 1;
-    const newIndex = isLastSlide ? 0 : currentIndex + 1;
-    setCurrentIndex(newIndex);
-  };
-
-  const goToSlide = (slideIndex) => {
-    setCurrentIndex(slideIndex);
-  };
-  const location = useLocation();
-  const isHomePage = location.pathname === "/";
-  if (!isHomePage) {
-    return null;
-  }
+export  function DefaultCarousel() {
   return (
-    <div className="max-w-[50] h-[500px] w-90 m-auto py-16 px-10 relative group animate-fade-right animate-once animate-duration-[500ms] animate-ease-out">
-      <div
-        style={{ backgroundImage: `url(${slides[currentIndex].url})` }}
-        className="w-full h-full rounded bg-center bg-cover duration-500"
-      ></div>
+    <Carousel>
+      <img
+        alt="..."
+        src="https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1"
+      />
+      <img
+        alt="..."
+        src="https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1"
+      />
+      <img
+        alt="..."
+        src="https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1"
+      />
+      <img
+        alt="..."
+        src="https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80"
+      />
+      <img
+        alt="..."
+        src="https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1"
+      />
+    </Carousel>
+  )
+}
 
-      <div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
-        <BsChevronCompactLeft onClick={prevSlide} size={30} />
-      </div>
 
-      <div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
-        <BsChevronCompactRight onClick={nextSlide} size={30} />
-      </div>
-      <div className="flex top-4 justify-center py-2">
-        {slides.map((slide, slideIndex) => (
-          <div
-            key={slideIndex}
-            onClick={() => goToSlide(slideIndex)}
-            className="text-2xl cursor-pointer"
-          >
-            <RxDotFilled />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

tailwind.config.js

@@ -2,12 +2,14 @@
 module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
+    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}", 
   ],
   theme: {
     extend: {},
   },
   plugins: [
-    require('tailwindcss-animated')
+    require('tailwindcss-animated'),
+    require('flowbite/plugin'), 
   ],
 }