feat: implement custom error handling in Await components for carousel and category sections

app/components/error/await.tsx

@@ -0,0 +1,10 @@
+import { useAsyncError } from 'react-router'
+
+export const ErrorAwait = () => {
+  const error = useAsyncError()
+  return (
+    <p>
+      {error instanceof Error ? error.message : 'An unexpected error occurred.'}
+    </p>
+  )
+}

app/components/ui/carousel-hero.tsx

@@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
 import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
@@ -76,7 +77,7 @@ export const CarouselHero = (properties: TNews) => {
           <Suspense fallback={<div>Loading...</div>}>
             <Await
               resolve={items}
-              errorElement={<div>Oops!</div>}
+              errorElement={<ErrorAwait />}
             >
               {(value) =>
                 value.data.map(

app/components/ui/carousel-section.tsx

@@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
 import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
@@ -82,7 +83,7 @@ export const CarouselSection = (properties: TNews) => {
           <Suspense fallback={<div>Loading...</div>}>
             <Await
               resolve={items}
-              errorElement={<div>Oops!</div>}
+              errorElement={<ErrorAwait />}
             >
               {(value) =>
                 value.data.map(

app/components/ui/category-section.tsx

@@ -3,6 +3,7 @@ import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
@@ -45,7 +46,7 @@ export const CategorySection = (properties: TNews) => {
         <Suspense fallback={<div>Loading...</div>}>
           <Await
             resolve={items}
-            errorElement={<div>Oops!</div>}
+            errorElement={<ErrorAwait />}
           >
             {(value) =>
               value.data.map(