From 0cb7532e6c4b5ff204905127fee7678b82e16ffd Mon Sep 17 00:00:00 2001 From: edwin6666 Date: Tue, 10 Oct 2023 12:28:17 -0400 Subject: [PATCH] Fix carousel transition --- package-lock.json | 127 ++++++++++++++++++++++++--- package.json | 1 + src/App.js | 15 +++- src/components/Carousel/Carousel.jsx | 96 ++++++-------------- tailwind.config.js | 4 +- 5 files changed, 159 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6aac23a..5c35d07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,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", @@ -2399,16 +2400,20 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", - "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", + "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } }, "node_modules/@floating-ui/dom": { - "version": "1.4.5", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz", - "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", "dependencies": { - "@floating-ui/core": "^1.3.1" + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" } }, "node_modules/@floating-ui/react": { @@ -2437,6 +2442,11 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@floating-ui/utils": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", @@ -3596,6 +3606,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz", @@ -6874,6 +6893,11 @@ "node": ">=10" } }, + "node_modules/debounce": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -7245,6 +7269,11 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "node_modules/easy-bem": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz", + "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==" + }, "node_modules/easymde": { "version": "2.18.0", "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz", @@ -8453,6 +8482,58 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz", "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" }, + "node_modules/flowbite": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz", + "integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==", + "dependencies": { + "@popperjs/core": "^2.9.3", + "mini-svg-data-uri": "^1.4.3" + } + }, + "node_modules/flowbite-react": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.6.4.tgz", + "integrity": "sha512-36mhawQRalOyq40ZLXesCTvcidYBO0vRFb672YSfflQHl5mENzB3o1SW6oGPpedmS/rWTlK+VBK7ia+1UYr+6w==", + "dependencies": { + "@floating-ui/react": "^0.24.3", + "flowbite": "^1.6.6", + "react-icons": "^4.10.1", + "react-indiana-drag-scroll": "^2.2.0", + "tailwind-merge": "^1.13.2" + }, + "peerDependencies": { + "react": "^18", + "react-dom": "^18", + "tailwindcss": "^3" + } + }, + "node_modules/flowbite-react/node_modules/@floating-ui/react": { + "version": "0.24.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.24.8.tgz", + "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.1", + "aria-hidden": "^1.2.3", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/flowbite-react/node_modules/@floating-ui/react-dom": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/follow-redirects": { "version": "1.15.2", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", @@ -13006,6 +13087,14 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -15321,13 +15410,31 @@ } }, "node_modules/react-icons": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz", - "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", "peerDependencies": { "react": "*" } }, + "node_modules/react-indiana-drag-scroll": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz", + "integrity": "sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==", + "dependencies": { + "classnames": "^2.2.6", + "debounce": "^1.2.0", + "easy-bem": "^1.1.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 5243e45..8904574 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 1a36b23..904e5b7 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ 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() { @@ -16,12 +16,12 @@ function App() {
- + {/* Public routes */} } /> } /> - } /> + } /> } /> {/* Private routes */} @@ -40,5 +40,12 @@ function App() {
); } - +function HomePageWithCarousel() { + return ( + <> + + + + ); +} export default App; diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx index 9c7e90a..476929a 100644 --- a/src/components/Carousel/Carousel.jsx +++ b/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 ( -
-
+ + ... + ... + ... + ... + ... + + ) +} -
- -
-
- -
-
- {slides.map((slide, slideIndex) => ( -
goToSlide(slideIndex)} - className="text-2xl cursor-pointer" - > - -
- ))} -
-
- ); -} diff --git a/tailwind.config.js b/tailwind.config.js index 88403d3..027343b 100644 --- a/tailwind.config.js +++ b/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'), ], }