From d4871d1afb7734882d7f8927cec8a094f3bb5d86 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 25 Feb 2025 05:44:53 +0100
Subject: [PATCH] feat: review style of error and refacto

---
 src/app/libraries/[libraryId]/page.tsx | 11 +++++-----
 src/app/page.tsx                       |  9 ++++----
 src/app/series/[seriesId]/page.tsx     | 11 +++++-----
 src/components/ui/ErrorMessage.tsx     | 30 ++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/ErrorMessage.tsx

diff --git a/src/app/libraries/[libraryId]/page.tsx b/src/app/libraries/[libraryId]/page.tsx
index 023b53d..7f5ce2c 100644
--- a/src/app/libraries/[libraryId]/page.tsx
+++ b/src/app/libraries/[libraryId]/page.tsx
@@ -4,6 +4,7 @@ import { PreferencesService } from "@/lib/services/preferences.service";
 import { revalidatePath } from "next/cache";
 import { RefreshButton } from "@/components/library/RefreshButton";
 import { withPageTiming } from "@/lib/hoc/withPageTiming";
+import { ErrorMessage } from "@/components/ui/ErrorMessage";
 
 interface PageProps {
   params: { libraryId: string };
@@ -97,11 +98,11 @@ async function LibraryPage({ params, searchParams }: PageProps) {
           <h1 className="text-3xl font-bold">Séries</h1>
           <RefreshButton libraryId={params.libraryId} refreshLibrary={refreshLibrary} />
         </div>
-        <div className="rounded-md bg-destructive/15 p-4">
-          <p className="text-sm text-destructive">
-            {error instanceof Error ? error.message : "Erreur lors de la récupération des séries"}
-          </p>
-        </div>
+        <ErrorMessage
+          message={
+            error instanceof Error ? error.message : "Erreur lors de la récupération des séries"
+          }
+        />
       </div>
     );
   }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f5770aa..e196e0e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import { HomeService } from "@/lib/services/home.service";
 import { redirect } from "next/navigation";
 import { revalidatePath } from "next/cache";
 import { withPageTiming } from "@/lib/hoc/withPageTiming";
+import { ErrorMessage } from "@/components/ui/ErrorMessage";
 
 async function refreshHome() {
   "use server";
@@ -30,11 +31,9 @@ async function HomePage() {
 
     return (
       <main className="container mx-auto px-4 py-8">
-        <div className="rounded-md bg-destructive/15 p-4">
-          <p className="text-sm text-destructive">
-            {error instanceof Error ? error.message : "Une erreur est survenue"}
-          </p>
-        </div>
+        <ErrorMessage
+          message={error instanceof Error ? error.message : "Une erreur est survenue"}
+        />
       </main>
     );
   }
diff --git a/src/app/series/[seriesId]/page.tsx b/src/app/series/[seriesId]/page.tsx
index c079dcb..a7677d1 100644
--- a/src/app/series/[seriesId]/page.tsx
+++ b/src/app/series/[seriesId]/page.tsx
@@ -4,6 +4,7 @@ import { SeriesService } from "@/lib/services/series.service";
 import { PreferencesService } from "@/lib/services/preferences.service";
 import { revalidatePath } from "next/cache";
 import { withPageTiming } from "@/lib/hoc/withPageTiming";
+import { ErrorMessage } from "@/components/ui/ErrorMessage";
 
 interface PageProps {
   params: { seriesId: string };
@@ -68,11 +69,11 @@ async function SeriesPage({ params, searchParams }: PageProps) {
     return (
       <div className="container py-8 space-y-8">
         <h1 className="text-3xl font-bold">Série</h1>
-        <div className="rounded-md bg-destructive/15 p-4">
-          <p className="text-sm text-destructive">
-            {error instanceof Error ? error.message : "Erreur lors de la récupération de la série"}
-          </p>
-        </div>
+        <ErrorMessage
+          message={
+            error instanceof Error ? error.message : "Erreur lors de la récupération de la série"
+          }
+        />
       </div>
     );
   }
diff --git a/src/components/ui/ErrorMessage.tsx b/src/components/ui/ErrorMessage.tsx
new file mode 100644
index 0000000..7fe1626
--- /dev/null
+++ b/src/components/ui/ErrorMessage.tsx
@@ -0,0 +1,30 @@
+import { AlertCircle } from "lucide-react";
+
+interface ErrorMessageProps {
+  message: string;
+}
+
+export const ErrorMessage = ({ message }: ErrorMessageProps) => {
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className="relative overflow-hidden rounded-lg border border-destructive/50 bg-background p-6 shadow-lg dark:border-destructive/30 dark:bg-destructive/5"
+    >
+      <div className="absolute inset-0 bg-destructive/5 dark:bg-gradient-to-b dark:from-destructive/10 dark:to-destructive/5" />
+
+      <div className="relative flex items-start gap-4">
+        <div className="rounded-full bg-destructive/10 p-2 dark:bg-destructive/30">
+          <AlertCircle className="h-5 w-5 text-destructive dark:text-red-400" />
+        </div>
+
+        <div className="flex-1">
+          <h3 className="mb-1 font-medium text-destructive dark:text-red-400">
+            Une erreur est survenue
+          </h3>
+          <p className="text-sm text-destructive/90 dark:text-red-300/90">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+};