Feature Rich Card Slider - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from "react"; import axios from "axios"; import { FaChevronLeft, FaChevronRight } from "react icons/fa"; import "../../../tailwind.css"; const Card = ({ image, name, description, sizeClass }) => { return ( <div className={`relative overflow hidden rounded lg shadow lg transition all duration 300 ease in out ${sizeClass}`} // Sử dụng sizeClass để điều chỉnh kích thước style={{ aspectRatio: "3/4" }} > <img src={image} alt={name} className="w full h full object cover" loading="lazy" /> <div className="absolute inset 0 bg black bg opacity 50 opacity 0 hover:opacity 100 transition opacity duration 300 flex flex col justify end p 4"> <h3 className="text white text lg font semibold mb 1">{name}</h3> <p className="text white text sm">{description}</p> </div> </div> ); }; const FeatureRichCardSlider = () => { const [events, setEvents] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); const [isSmallScreen, setIsSmallScreen] = useState(false); useEffect(() => { // Lấy dữ liệu sự kiện từ backend const fetchEvents = async () => { try { const response = await axios.get("http://localhost:4000/api/event"); setEvents(response.data.events); } catch (error) { console.error("Error fetching events:", error); } }; fetchEvents(); }, []); useEffect(() => { const handleResize = () => { setIsSmallScreen(window.innerWidth < 768); }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); useEffect(() => { const intervalId = setInterval(() => { setCurrentIndex((prevIndex) => prevIndex === events.length 1 ? 0 : prevIndex + 1 ); }, 5000); // Chuyển đổi sau mỗi 5 giây return () => clearInterval(intervalId); }, [events]); const handlePrev = () => { setCurrentIndex((prevIndex) => prevIndex === 0 ? events.length 1 : prevIndex 1 ); }; const handleNext = () => { setCurrentIndex((prevIndex) => prevIndex === events.length 1 ? 0 : prevIndex + 1 ); }; const getVisibleCards = () => { if (isSmallScreen) { return events[currentIndex] ? [events[currentIndex]] : []; } const visibleCards = []; for (let i = 2; i <= 2; i++) { const index = (currentIndex + i + events.length) % events.length; if ( events[index] && events[index].images && events[index].images.length > 0 ) { const sizeClass = i === 0 ? "scale 110" : // Ảnh giữa to nhất i === 1 || i === 1 ? "scale 95" : // Ảnh bên cạnh "scale 90"; // Ảnh ngoài cùng visibleCards.push({ ...events[index], sizeClass }); } } return visibleCards; }; return ( <div className="relative w full mx auto px 4 py 8"> <div className="flex items center justify center space x 4 overflow hidden"> {getVisibleCards().map((event) => ( <Card key={event._id} // Sử dụng _id từ MongoDB image={ event.images && event.images.length > 0 ? `http://localhost:4000/${event.images[0]}` : "" } name={event.eventName} description={event.description} sizeClass={event.sizeClass} // Truyền sizeClass /> ))} </div> <button onClick={handlePrev} className="absolute left 10 top 1/2 transform translate y 1/2 bg white bg opacity 50 hover:bg opacity 75 rounded full p 2 focus:outline none focus:ring 2 focus:ring blue 500 transition all duration 300" aria label="Previous card" > <FaChevronLeft className="text gray 800 text 2xl" /> </button> <button onClick={handleNext} className="absolute right 10 top 1/2 transform translate y 1/2 bg white bg opacity 50 hover:bg opacity 75 rounded full p 2 focus:outline none focus:ring 2 focus:ring blue 500 transition all duration 300" aria label="Next card" > <FaChevronRight className="text gray 800 text 2xl" /> </button> </div> ); }; export default FeatureRichCardSlider; Based on my code please edit according to my request I want to change a little bit so that the middle image will be the biggest, the 2 images on either side of the middle image will be a little smaller and the 2 outermost images on either side will be the smallest