added some animation and styling

theme-costume-app/src/components/Carousel.js

@@ -21,26 +21,44 @@ const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, tota
   };
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <button onClick={goToPreviousPage} style={{ marginRight: 10 }}>&lt;</button>
-      <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>{renderDots()}</div>
-      <button onClick={goToNextPage}>&gt;</button>
+    <div style={styles.navigation}>
+      <button onClick={goToPreviousPage} style={styles.navButton}>&lt;</button>
+      <div style={styles.dotsContainer}>{renderDots()}</div>
+      <button onClick={goToNextPage} style={styles.navButton}>&gt;</button>
     </div>
   );
 };
 
-const MoviesDisplay = ({ setOfMovies }) => {
+const MoviesDisplay = ({ setOfMovies, goToNextPage, goToPreviousPage, currentPage, totalPages }) => {
   return (
-    <div style={styles.movies}>
-      {setOfMovies.map((movie, index) => (
-        <div key={index} style={styles.movie}>
-          <img src={movie.source} alt={movie.name} style={styles.image} />
-        </div>
-      ))}
+    <div style={styles.moviesContainer}>
+      <div style={styles.movies}>
+        {setOfMovies.map((movie, index) => (
+          <div key={index} style={styles.movie}>
+            <img src={movie.source} alt={movie.name} style={styles.image} />
+          </div>
+        ))}
+      </div>
+      <div style={styles.dotsContainer}>
+        {[...Array(totalPages)].map((_, index) => (
+          <span
+            key={index}
+            style={{
+              ...styles.dot,
+              backgroundColor: index + 1 === currentPage ? 'black' : 'gray',
+            }}
+          />
+        ))}
+      </div>
+      <div style={styles.navLeft}>
+        <button onClick={goToPreviousPage} style={styles.navButton}>&lt;</button>
+      </div>
+      <div style={styles.navRight}>
+        <button onClick={goToNextPage} style={styles.navButton}>&gt;</button>
+      </div>
     </div>
   );
 };
-
 const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const TOTAL_PAGES = Math.ceil(items.length / showingItems);
@@ -51,19 +69,11 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   }, [currentPage]);
 
   const previousPage = () => {
-    if (currentPage === 1) {
-      setCurrentPage(TOTAL_PAGES);
-    } else {
-      setCurrentPage(currentPage - 1);
-    }
+    setCurrentPage((prevPage) => (prevPage === 1 ? TOTAL_PAGES : prevPage - 1));
   };
 
   const nextPage = () => {
-    if (currentPage === TOTAL_PAGES) {
-      setCurrentPage(1);
-    } else {
-      setCurrentPage(currentPage + 1);
-    }
+    setCurrentPage((prevPage) => (prevPage === TOTAL_PAGES ? 1 : prevPage + 1));
   };
 
   const groupingMovies = [];
@@ -74,15 +84,7 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
   return (
     <div style={styles.container}>
       <div style={styles.topRow}>
-        <h3>Teman</h3>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <NavigationComponent
-            goToPreviousPage={previousPage}
-            goToNextPage={nextPage}
-            totalPages={TOTAL_PAGES}
-            currentPage={currentPage}
-          />
-        </div>
+        <h3 style={styles.title}>Teman</h3>
       </div>
       <div style={styles.sliderContainer}>
         <div
@@ -93,19 +95,38 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
         >
           {groupingMovies.map((group, index) => (
             <div key={index} style={styles.page}>
-              <MoviesDisplay setOfMovies={group} />
+              <MoviesDisplay
+                setOfMovies={group}
+                goToNextPage={nextPage}
+                goToPreviousPage={previousPage}
+                currentPage={currentPage}
+                totalPages={TOTAL_PAGES}
+              />
             </div>
           ))}
         </div>
+        <div style={styles.dotsContainer}>
+          {[...Array(TOTAL_PAGES)].map((_, index) => (
+            <span
+              key={index}
+              style={{
+                ...styles.dot,
+                backgroundColor: index + 1 === currentPage ? 'black' : 'gray',
+              }}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
 };
 
+
 const styles = {
   container: {
     backgroundColor: '#fff',
     width: '100%',
+    position: 'relative',
   },
   topRow: {
     display: 'flex',
@@ -115,10 +136,12 @@ const styles = {
     width: '100%',
     backgroundColor: 'white',
     alignItems: 'center',
+    position: 'relative',
   },
   sliderContainer: {
     overflow: 'hidden',
     width: '100%',
+    position: 'relative',
   },
   slider: {
     display: 'flex',
@@ -126,10 +149,15 @@ const styles = {
     width: '100%',
   },
   page: {
-    display: 'flex',
+    //display: 'flex',
     width: '100%',
     minWidth: '100%',
     boxSizing: 'border-box',
+    position: 'relative',
+ 
+  },
+  moviesContainer: {
+    position: 'relative',
   },
   movies: {
     display: 'flex',
@@ -142,9 +170,40 @@ const styles = {
   },
   image: {
     width: '100%',
-    height: '350px',
+    height: '350px', // This ensures the aspect ratio is maintained
     borderRadius: 10,
   },
+  navigation: {
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    transform: 'translateY(-50%)',
+    zIndex: 1, // Ensure navigation buttons are above images
+  },
+  navButton: {
+    background: 'rgba(0, 0, 0, 0.5)',
+    color: 'white',
+    border: 'none',
+    padding: '10px',
+    cursor: 'pointer',
+  },
+  dotsContainer: {
+    height: '10px',
+  },
+  navLeft: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  navRight: {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
 };
 
 export default Carousel;