From 5b5ce683a521d44f92f0f8025dd5ab982f728041 Mon Sep 17 00:00:00 2001
From: SkymelTheo <erigoni.t@gmail.com>
Date: Thu, 20 Feb 2025 13:34:02 +0100
Subject: [PATCH 1/2] commit-pour-pull

---
 src/components/comics.jsx  | 5 +++--
 src/style/comics-page.scss | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/comics.jsx b/src/components/comics.jsx
index 8a4b5ef..5efdc57 100644
--- a/src/components/comics.jsx
+++ b/src/components/comics.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import '../style/comics.scss';
 
@@ -19,7 +20,7 @@ export default function Comics({ data, onClick }) {
           {data.map((dataItem) => {
             const detailsUrl = dataItem.urls.find((element) => element['type'] === 'detail').url;
             return (
-              <a
+              <Link
                 key={dataItem.id}
                 className='comic-card'
                 style={{
@@ -37,7 +38,7 @@ export default function Comics({ data, onClick }) {
                 <div className='comics-title'>
                   <h3>{dataItem.title}</h3>
                 </div>
-              </a>
+              </Link>
             );
           })}
         </div>
diff --git a/src/style/comics-page.scss b/src/style/comics-page.scss
index b4412d1..2f41d96 100644
--- a/src/style/comics-page.scss
+++ b/src/style/comics-page.scss
@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: repeat(6, 170px);
   justify-content: center;
-  grid-gap: 10px;
+  grid-gap: 25px;
   padding: 1em;
   margin-top: 20px;
 

From abbde58b3f6c782f374e485ea8398b390f28e444 Mon Sep 17 00:00:00 2001
From: sadjoaldi <alsannealdi@hotmail.com>
Date: Thu, 20 Feb 2025 13:35:17 +0100
Subject: [PATCH 2/2] modif fichier comics, marvel-characters et comics-display

---
 src/components/comics.jsx            |  5 +-
 src/components/marvel-characters.jsx | 70 ++++++++++++++++------------
 src/style/comics-display.scss        |  5 ++
 3 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/components/comics.jsx b/src/components/comics.jsx
index 8a4b5ef..5efdc57 100644
--- a/src/components/comics.jsx
+++ b/src/components/comics.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import '../style/comics.scss';
 
@@ -19,7 +20,7 @@ export default function Comics({ data, onClick }) {
           {data.map((dataItem) => {
             const detailsUrl = dataItem.urls.find((element) => element['type'] === 'detail').url;
             return (
-              <a
+              <Link
                 key={dataItem.id}
                 className='comic-card'
                 style={{
@@ -37,7 +38,7 @@ export default function Comics({ data, onClick }) {
                 <div className='comics-title'>
                   <h3>{dataItem.title}</h3>
                 </div>
-              </a>
+              </Link>
             );
           })}
         </div>
diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
index 809532a..d1d8220 100644
--- a/src/components/marvel-characters.jsx
+++ b/src/components/marvel-characters.jsx
@@ -1,12 +1,9 @@
-/* eslint-disable no-console */
 import { useEffect, useState } from 'react';
 
 import Card from '../components/card';
 import Modal from '../components/modal';
 import Profile from '../components/profile';
 
-// import '../style/marvel-characters.scss';
-
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
 
 export default function MarvelCharacters({ addToFavorites }) {
@@ -15,6 +12,9 @@ export default function MarvelCharacters({ addToFavorites }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
 
+  const [currentPage, setCurrentPage] = useState(0);
+  const charactersPerPage = 20;
+
   useEffect(() => {
     const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100`;
 
@@ -33,6 +33,18 @@ export default function MarvelCharacters({ addToFavorites }) {
     addToFavorites(character);
   };
 
+  const handlePrev = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if ((currentPage + 1) * charactersPerPage < marvelCharacter.length) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   const handleCardClick = (character) => {
     setSelectedCharacter(character);
     fetchComics(character.id);
@@ -50,7 +62,6 @@ export default function MarvelCharacters({ addToFavorites }) {
       .then((data) => {
         setComics(data.data.results);
       })
-      // eslint-disable-next-line no-console
       .catch((err) => console.error(err));
   };
 
@@ -60,35 +71,34 @@ export default function MarvelCharacters({ addToFavorites }) {
     setComics([]);
   };
 
+  const displayedCharacters = marvelCharacter
+    .filter(
+      (marvel) =>
+        marvel.thumbnail &&
+        marvel.thumbnail.path &&
+        marvel.thumbnail.extension &&
+        !marvel.thumbnail.path.includes('image_not_available'),
+    )
+    .slice(currentPage * charactersPerPage, (currentPage + 1) * charactersPerPage);
+
   return (
     <div className='characters-comics'>
+      <div className='pagination'>
+        <button onClick={handlePrev}>prev</button>
+        <button onClick={handleNext} disabled={(currentPage + 1) * charactersPerPage >= marvelCharacter.length}>
+          next
+        </button>
+      </div>
       <div className='grid-box'>
-        {marvelCharacter
-          .filter(
-            (marvel) =>
-              marvel.thumbnail &&
-              marvel.thumbnail.path &&
-              marvel.thumbnail.extension &&
-              !marvel.thumbnail.path.includes('image_not_available'),
-          )
-          .slice(0, 20)
-          .filter(
-            (marvel) =>
-              marvel.thumbnail &&
-              marvel.thumbnail.path &&
-              marvel.thumbnail.extension &&
-              !marvel.thumbnail.path.includes('image_not_available'),
-          )
-          .slice(0, 20)
-          .map((character) => (
-            <Card
-              key={character.id}
-              character={character.name}
-              image={`${character.thumbnail.path}.${character.thumbnail.extension}`}
-              onAddToFavorites={() => handleAddToFavorites(character)}
-              onClick={() => handleCardClick(character)}
-            />
-          ))}
+        {displayedCharacters.map((character) => (
+          <Card
+            key={character.id}
+            character={character.name}
+            image={`${character.thumbnail.path}.${character.thumbnail.extension}`}
+            onAddToFavorites={() => handleAddToFavorites(character)}
+            onClick={() => handleCardClick(character)}
+          />
+        ))}
       </div>
       <div className='comics-modal'>
         <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss
index 31f35b7..8fbec68 100644
--- a/src/style/comics-display.scss
+++ b/src/style/comics-display.scss
@@ -50,7 +50,12 @@
 
     p {
       font-size: 1rem;
+      overflow: hidden;
       line-height: 1.5;
+      max-width: 300px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 6;
     }
   }
 }