fleche, styles responsive/desktop

WildCodeSchool · Feb 25, 2025 · ceb6e22 · ceb6e22
1 parent a2ff301
commit ceb6e22
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
@@ -13,7 +13,8 @@ export default function MarvelCharacters({ addToFavorites }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
-  const charactersPerPage = 20;
+  const charactersPerPage = 15;
+  const [count, setcount] = useState(0);
 
   useEffect(() => {
     const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100&offset=0`;
@@ -36,13 +37,17 @@ export default function MarvelCharacters({ addToFavorites }) {
 
   const handlePrev = () => {
     if (currentPage > 0) {
-      setCurrentPage(currentPage - 1);
+      setCurrentPage((prevPage) => prevPage - 1);
+      setcount((prevCount) => Math.max(prevCount - 1, 0));
     }
   };
 
   const handleNext = () => {
-    if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
-      setCurrentPage(currentPage + 1);
+    if (count <= 3) {
+      if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
+        setCurrentPage(currentPage + 1);
+      }
+      setcount(count + 1);
     }
   };
 
@@ -86,14 +91,9 @@ export default function MarvelCharacters({ addToFavorites }) {
     <div className='characters-comics'>
       <div className='pagination'>
         <button className='btn-left' onClick={handlePrev}>
-          {' '}
-          {`<`}{' '}
+          {`<`}
         </button>
-        <button
-          className='btn-right'
-          onClick={handleNext}
-          disabled={(currentPage + 1) * charactersPerPage >= marvelCharacter.length}
-        >
+        <button className='btn-right' onClick={handleNext} disabled={count >= 3}>
           {`>`}
         </button>
       </div>

diff --git a/src/components/profile.jsx b/src/components/profile.jsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 import '../style/profile-page.scss';
 
-export default function Profile({ characterMarvel, img, title, description, comics }) {
+export default function Profile({ characterMarvel, img, description, comics }) {
   return (
     <div className='profile'>
       <div className='comics-characters'>

diff --git a/src/style/marvel-characters.scss b/src/style/marvel-characters.scss
@@ -11,7 +11,7 @@
     background-color: $primary-color;
     position: absolute;
     margin-left: 88%;
-    margin-top: 43%;
+    margin-top: 30%;
     width: 3%;
     border: none;
     color: $text-color;
@@ -25,7 +25,7 @@
     background-color: $primary-color;
     position: absolute;
     margin-left: 5%;
-    margin-top: 43%;
+    margin-top: 30%;
     width: 3%;
     border: none;
     color: $text-color;
@@ -47,7 +47,7 @@
       color: $text-color;
       cursor: pointer;
       margin-left: 65%;
-      margin-top: 661%;
+      margin-top: 530%;
     }
     .btn-left {
       border-radius: 50%;
@@ -61,7 +61,7 @@
       color: $text-color;
       cursor: pointer;
       margin-left: 27%;
-      margin-top: 661%;
+      margin-top: 530%;
     }
   }
 }