Fix carousel transition (#34)

Author: EdwinDev6

package-lock.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",

package.json

@@ -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/App.js

@@ -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>
- );
-}

src/components/Carousel/Carousel.jsx

@@ -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'), 
  ],
 }