commit

src/pages/comics-page.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import Loader from '../components/loader';
 import '../style/comics-page.scss';
 
 const publicKey = import.meta.env.VITE_PUBLIC_KEY;
@@ -10,8 +9,6 @@ function ComicPage() {
   const [comics, setComics] = useState([]);
   const [visibleCount, setVisibleCount] = useState(12);
   const [offset, setOffset] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [err, setError] = useState(null);
 
   useEffect(() => {
     fetch(`https://gateway.marvel.com/v1/public/comics?apikey=${publicKey}&limit=50&offset=${offset}`)
@@ -28,7 +25,7 @@ function ComicPage() {
               comic.thumbnail.extension &&
               !comic.thumbnail.path.includes('image_not_available'),
           );
-          setLoading(false);
+
           const existingIds = prevComics.map((comic) => comic.id);
           const filteredNewComics = newComics.filter((comic) => !existingIds.includes(comic.id));
 
@@ -39,21 +36,10 @@ function ComicPage() {
           setOffset((prevOffset) => prevOffset + 50);
         }
       })
-
-      .catch((err) => {
-        setError(err);
-        setLoading(false);
-      });
+      // eslint-disable-next-line no-console
+      .catch((err) => console.error(err));
   }, [offset]);
 
-  if (loading)
-    return (
-      <div>
-        <Loader />
-      </div>
-    );
-
-  if (err) return <div>Error: {err.message}</div>;
   const loadMore = () => {
     setVisibleCount((prev) => prev + 12);
   };

src/style/comics-page.scss

@@ -5,97 +5,28 @@
   padding-left: 20px;
 
   .typo-comics {
-    background-color: #670208;
-    font-family: 'Aclonica', sans-serif;
+    background-color: $primary-color;
+    font-family: $font-family;
     width: 140px;
     font-size: 18px;
     padding: 14px;
     border-radius: 10px;
-    margin-left: 13%;
-    color: white;
-    box-shadow: 0px 2px 6px black;
-    text-shadow: 3px 2px 8px black;
+    margin-left: 8%;
+    color: $text-color;
+    box-shadow: 0px 2px 6px $background-card;
+    text-shadow: 3px 2px 8px $background-card;
     text-align: center;
   }
-  .comics {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(6, 170px);
-    justify-content: center;
-    grid-gap: 10px;
-    padding: 1em;
-    margin-top: 10px;
-    .comics-title {
-      font-family: $font-family;
-      font-weight: 700;
-      font-size: 1.2em;
-      text-transform: lowercase;
-      color: $background-card;
-    }
-
-    .comic-card {
-      width: 170px;
-      height: 260px;
-      object-fit: cover;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      text-decoration: none;
-      border:
-        solid 4px,
-        $text-color;
-      border-radius: 8px;
-
-      .caption {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        color: $text-color;
-        text-align: center;
-        background: $background-card;
-        height: 100%;
-
-        &.bottom {
-          position: absolute;
-          bottom: 1rem;
-          left: 50%;
-          transform: translateX(-50%);
-          opacity: 0;
-          color: $text-color;
-          text-decoration: underline;
-          width: 60%;
-        }
-      }
-
-      &:hover {
-        cursor: pointer;
-        filter: grayscale(0);
-        box-shadow: 6px 6px $background-card;
-        transform: translate(-2px, -2px);
-
-        .caption {
-          opacity: 0;
-        }
-
-        .bottom {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
   .more {
     display: flex;
     justify-content: center;
     align-items: center;
     top: 10px;
 
     button {
-      background-color: #670208;
+      background-color: $primary-color;
       border: none;
-      color: white;
+      color: $text-color;
       padding: 10px 20px;
       border-radius: 5px;
       font-size: 1em;
@@ -104,13 +35,10 @@
       margin-top: 45px;
     }
   }
-  .comics-footer footer {
-    margin-top: 50px;
-  }
 
   @media screen and (min-width: 301px) and (max-width: 644px) {
     .typo-comics {
-      margin-left: 21px;
+      margin: 0 0 21px 25px;
 
       .comics {
         grid-template-columns: repeat(2, 170px);

src/style/comics.scss

@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: repeat(6, 170px);
   justify-content: center;
-  grid-gap: 10px;
+  grid-gap: 40px;
   padding: 1em;
 }
 
@@ -80,11 +80,3 @@
     gap: 10px;
   }
 }
-
-@media only screen and (min-width: 800px) {
-  .comics {
-    display: grid;
-    grid-template-columns: repeat(4, 170px);
-    gap: 10px;
-  }
-}

src/style/marvel-characters.scss

@@ -1,7 +1,5 @@
 @use 'settings' as *;
-.loading {
-  background-color: yellow;
-}
+
 .pagination {
   position: relative;