From c462bc30e19445716917b8423fc9378e25248a08 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 1 Apr 2025 11:30:15 +0200
Subject: [PATCH] Migrate ErrorHandler component to tailwind

---
 src/common/ErrorHandler.tsx | 17 +++++++----------
 src/common/ErrorLayout.tsx  | 15 +++++++++++++++
 src/common/NotFound.tsx     | 22 ++++++++++------------
 3 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 src/common/ErrorLayout.tsx

diff --git a/src/common/ErrorHandler.tsx b/src/common/ErrorHandler.tsx
index a18de8c1..a72589b0 100644
--- a/src/common/ErrorHandler.tsx
+++ b/src/common/ErrorHandler.tsx
@@ -1,7 +1,7 @@
-import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
+import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { Component } from 'react';
-import { Button } from 'reactstrap';
+import { ErrorLayout } from './ErrorLayout';
 
 type ErrorHandlerProps = PropsWithChildren<{
   location?: typeof window.location;
@@ -33,14 +33,11 @@ export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState
 
     if (hasError) {
       return (
-        <div className="home">
-          <SimpleCard className="p-4">
-            <h1>Oops! This is awkward :S</h1>
-            <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
-            <br />
-            <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
-          </SimpleCard>
-        </div>
+        <ErrorLayout title="Oops! This is awkward :S">
+          <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+          <br />
+          <Button size="lg" onClick={() => location.reload()}>Take me back</Button>
+        </ErrorLayout>
       );
     }
 
diff --git a/src/common/ErrorLayout.tsx b/src/common/ErrorLayout.tsx
new file mode 100644
index 00000000..ba3679a4
--- /dev/null
+++ b/src/common/ErrorLayout.tsx
@@ -0,0 +1,15 @@
+import { SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind';
+import type { FC, PropsWithChildren } from 'react';
+
+export type ErrorLayoutProps = PropsWithChildren<{
+  title: string;
+}>;
+
+export const ErrorLayout: FC<ErrorLayoutProps> = ({ children, title }) => (
+  <div className="tw:pt-4">
+    <SimpleCard className="tw:p-4 tw:w-full tw:lg:w-[65%] tw:m-auto">
+      <h2>{title}</h2>
+      {children}
+    </SimpleCard>
+  </div>
+);
diff --git a/src/common/NotFound.tsx b/src/common/NotFound.tsx
index 582e20d7..a19973f5 100644
--- a/src/common/NotFound.tsx
+++ b/src/common/NotFound.tsx
@@ -1,18 +1,16 @@
-import { Button, SimpleCard } from '@shlinkio/shlink-frontend-kit/tailwind';
+import { Button } from '@shlinkio/shlink-frontend-kit/tailwind';
 import type { FC, PropsWithChildren } from 'react';
+import { ErrorLayout } from './ErrorLayout';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 
 export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
-  <div className="tw:pt-4">
-    <SimpleCard className="tw:p-4 tw:w-full tw:lg:w-[50%] tw:m-auto">
-      <h2>Oops! We could not find requested route.</h2>
-      <p>
-        Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
-        button.
-      </p>
-      <br />
-      <Button inline to={to} size="lg">{children}</Button>
-    </SimpleCard>
-  </div>
+  <ErrorLayout title="Oops! We could not find requested route.">
+    <p>
+      Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
+      button.
+    </p>
+    <br />
+    <Button inline to={to} size="lg">{children}</Button>
+  </ErrorLayout>
 );