feat: Error Message on Header Items

Added error handling and placeholder components to AnimeNavListHover, MangaNavListHover, and NewsNavListHover components; updated consumetNews API to return null on error

app/api/consumetNews.ts

@@ -33,7 +33,7 @@ export default {
 
             console.log(err)
 
-            return err
+            return null
 
         }
 

app/layout/header/components/AnimeNavListHover/index.tsx

@@ -7,6 +7,7 @@ import anilist from '@/app/api/anilistMedias'
 import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
 import LoadingSvg from "@/public/assets/ripple-1s-200px.svg"
 import { animesGenres } from '../../index'
+import ErrorPlaceholder from '../ErrorPlaceholder'
 
 function AnimeNavListHover() {
 
@@ -22,6 +23,12 @@ function AnimeNavListHover() {
 
     }
 
+    if (!animeData) {
+
+        return <ErrorPlaceholder />
+
+    }
+
     return (
         <ul id={styles.anime_header_nav_container}>
             <li>

app/layout/header/components/ErrorPlaceholder/component.module.css

@@ -0,0 +1,47 @@
+.error_container {
+
+    z-index: 2;
+    position: absolute;
+    top: 69px;
+    left: 0;
+
+    padding-top: 32px;
+    padding-bottom: 64px;
+    padding-left: 64px;
+    padding-right: 64px;
+
+    background-color: var(--black-100);
+
+    min-height: 340px;
+    max-height: 60vh;
+    width: 100%;
+
+}
+
+.error_container .wrapper {
+
+    box-shadow: inset 0px 0px 20px 1px var(--background);
+
+    max-width: var(--breakpoint-xxl);
+    margin: auto;
+    padding: 24px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 4px;
+
+}
+
+.error_container .wrapper {
+    background-color: var(--white-100);
+}
+
+.error_container p {
+
+    font-weight: 500;
+    color: var(--black-100) !important;
+
+}

app/layout/header/components/ErrorPlaceholder/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Image from 'next/image';
+import ErrorImg from "@/public/error-img-2.png"
+import styles from "./component.module.css"
+
+export default function ErrorPlaceholder() {
+    return (
+        <div className={styles.error_container}>
+
+            <div className={styles.wrapper}>
+                <div className={styles.img_container}>
+                    <Image src={ErrorImg} alt='Error' height={200} />
+                </div>
+
+                <p>A error happened while loading this section.</p>
+            </div>
+
+        </div>
+    )
+}

app/layout/header/components/MangaNavListHover/index.tsx

@@ -7,6 +7,7 @@ import anilist from '@/app/api/anilistMedias'
 import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
 import * as MediaCard from '@/app/components/MediaCards/MediaCard'
 import LoadingSvg from "@/public/assets/ripple-1s-200px.svg"
+import ErrorPlaceholder from '../ErrorPlaceholder'
 
 function MangaNavListHover() {
 
@@ -22,6 +23,12 @@ function MangaNavListHover() {
 
     }
 
+    if (!mangaList) {
+
+        return <ErrorPlaceholder />
+
+    }
+
     return (
         <ul id={styles.manga_header_nav_container}>
             <li>

app/layout/header/components/NewsNavListHover/index.tsx

@@ -7,6 +7,7 @@ import news from '@/app/api/consumetNews'
 import { News } from '@/app/ts/interfaces/newsInterface'
 import SvgCalendar from "@/public/assets/calendar3.svg"
 import Image from 'next/image'
+import ErrorPlaceholder from '../ErrorPlaceholder'
 
 function NewsNavListHover() {
 
@@ -28,6 +29,12 @@ function NewsNavListHover() {
 
     }
 
+    if (!newsList) {
+
+        return <ErrorPlaceholder />
+
+    }
+
     return (
         <div id={styles.news_header_nav_container}>