Build the Carousel in App.jsx

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import "./index.css";

const defaultImages = [
  "/carousel/Helloooo.jpeg",
  "/carousel/download.jpeg",
  "/carousel/CatQuote.jpeg",
];

function App() {
  const [uploadedImages, setUploadedImages] = useState([]);
  const [currentIndex, setCurrentIndex] = useState(0);

  const images = uploadedImages.length > 0 ? uploadedImages : defaultImages;

  const nextImage = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  const prevImage = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
  };

  const handleUpload = (e) => {
    const files = Array.from(e.target.files).slice(0, 10);
    const urls = files.map((file) => URL.createObjectURL(file));
    setUploadedImages(urls);
    setCurrentIndex(0);
  };

  return (
    <div className="app-container">
      <h1 className="title">📸 Your Funtastic Gallery!</h1>

      <div style={{ marginBottom: "1.5rem" }}>
        <input
          type="file"
          multiple
          accept="image/*"
          onChange={handleUpload}
          style={{
            background: "#00eaff",
            border: "none",
            padding: "0.6rem 1.2rem",
            borderRadius: "1rem",
            color: "#000",
            fontWeight: "bold",
            cursor: "pointer"
          }}
        />
        <p style={{ fontSize: "0.9rem", color: "#00eaff", marginTop: "0.5rem" }}>
          Hello! Welcome to my carousel app! You can upload up to 10 images to create your own carousel and mini album!
        </p>
      </div>

      <div className="carousel">
        <button className="nav-button" onClick={prevImage}>⟵</button>

        <div className="image-container">
          <AnimatePresence mode="wait">
            <motion.img
              key={images[currentIndex]}
              src={images[currentIndex]}
              alt={`Slide ${currentIndex}`}
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.6 }}
              className="carousel-image"
            />
          </AnimatePresence>
        </div>

        <button className="nav-button" onClick={nextImage}>⟶</button>
      </div>

      <div className="thumbnail-container">
        {images.map((img, index) => (
          <img
            key={index}
            src={img}
            alt={`Thumbnail ${index}`}
            onClick={() => setCurrentIndex(index)}
            className={`thumbnail ${index === currentIndex ? "active" : ""}`}
          />
        ))}
      </div>

      <p className="footer">
        Made by Jaishree Tomar for <a href="https://www.guvi.in/" target="_blank">GUVI</a>
      </p>
    </div>
  );
}

export default App;