From e5220a4c4eb2f9147ee38e26bbf73725d4040b6b Mon Sep 17 00:00:00 2001
From: gilles <gillesalbert99@gmail.com>
Date: Sun, 13 Sep 2026 18:23:24 +0200
Subject: [PATCH] feat: add ErrorPage component with back-to-home link

---
 src/components/ErrorPage.test.tsx | 27 +++++++++++++++++++++++++++
 src/components/ErrorPage.tsx      | 25 +++++++++++++++++++++++++
 src/interfaces/error-page.ts      |  5 +++++
 3 files changed, 57 insertions(+)
 create mode 100644 src/components/ErrorPage.test.tsx
 create mode 100644 src/components/ErrorPage.tsx
 create mode 100644 src/interfaces/error-page.ts

diff --git a/src/components/ErrorPage.test.tsx b/src/components/ErrorPage.test.tsx
new file mode 100644
index 0000000..f301680
--- /dev/null
+++ b/src/components/ErrorPage.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ErrorPage from './ErrorPage'
+
+describe('ErrorPage', () => {
+  it('renders default 404 content', () => {
+    render(<ErrorPage />)
+
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Page introuvable' })).toBeInTheDocument()
+  })
+
+  it('renders a link back to the home page', () => {
+    render(<ErrorPage />)
+
+    const link = screen.getByRole('link', { name: "Retour à l'accueil" })
+    expect(link).toHaveAttribute('href', '/')
+  })
+
+  it('uses custom code, title and message when provided', () => {
+    render(<ErrorPage code={500} title="Erreur serveur" message="Une erreur est survenue." />)
+
+    expect(screen.getByText('500')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Erreur serveur' })).toBeInTheDocument()
+    expect(screen.getByText('Une erreur est survenue.')).toBeInTheDocument()
+  })
+})
\ No newline at end of file
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
new file mode 100644
index 0000000..ea7f854
--- /dev/null
+++ b/src/components/ErrorPage.tsx
@@ -0,0 +1,25 @@
+import type { ErrorPageProps } from '../interfaces/error-page'
+
+function ErrorPage({
+  code = 404,
+  title = 'Page introuvable',
+  message = "Désolé, la page que vous cherchez n'existe pas.",
+}: ErrorPageProps) {
+  return (
+    <main className="mx-auto flex w-full max-w-2xl min-h-dvh flex-col items-center justify-center gap-6 px-4 text-center">
+      <p className="text-6xl font-bold text-blue-700">{code}</p>
+      <div>
+        <h1 className="text-2xl font-semibold">{title}</h1>
+        <p className="mt-2 text-gray-600">{message}</p>
+      </div>
+      <a
+        href="/"
+        className="rounded-lg bg-blue-700 px-5 py-2.5 text-white transition-colors hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-800 focus:ring-offset-2"
+      >
+        Retour à l'accueil
+      </a>
+    </main>
+  )
+}
+
+export default ErrorPage
\ No newline at end of file
diff --git a/src/interfaces/error-page.ts b/src/interfaces/error-page.ts
new file mode 100644
index 0000000..e39cbca
--- /dev/null
+++ b/src/interfaces/error-page.ts
@@ -0,0 +1,5 @@
+export interface ErrorPageProps {
+  code?: number
+  title?: string
+  message?: string
+}
\ No newline at end of file