add generic error state component

aelew · Feb 6, 2024 · af89903 · af89903
1 parent 91498ae
commit af89903
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 45 deletions.
diff --git a/src/app/(tools)/(domain)/_components/domain-not-registered.tsx b/src/app/(tools)/(domain)/_components/domain-not-registered.tsx
@@ -1,8 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { XCircleIcon } from '@/components/icons/x-circle';
-import { Card } from '@/components/ui/card';
+import { ErrorState } from '@/components/error-state';
 import { env } from '@/env';
 
 interface DomainNotRegisteredProps {
@@ -11,47 +10,45 @@ interface DomainNotRegisteredProps {
 
 export function DomainNotRegistered({ domain }: DomainNotRegisteredProps) {
   return (
-    <Card className="p-4">
-      <div className="flex min-h-48 flex-col items-center gap-4 rounded-lg border-4 border-dotted border-muted-foreground/15 px-4 py-12 text-center">
-        <XCircleIcon className="size-20" />
-        <h1 className="text-4xl font-semibold tracking-tighter">
-          Domain not found
-        </h1>
-        <div className="max-w-sm text-balance break-words">
+    <ErrorState
+      title="Domain not found"
+      description={
+        <>
           Looks like the domain <span className="font-medium">{domain}</span>{' '}
           hasn&apos;t been registered yet.
-        </div>
-        {env.NEXT_PUBLIC_IS_MAIN_INSTANCE === '1' && (
-          <>
-            <Link
-              id="1825518"
-              target="_blank"
-              href={
-                'https://spaceship.sjv.io/c/5212322/1825518/21274?u=' +
-                encodeURIComponent(
-                  `https://www.spaceship.com/domain-search/?query=${domain}&tab=domains`
-                )
-              }
-            >
-              <Image
-                className="rounded-lg shadow-lg transition-opacity hover:opacity-90"
-                src="https://a.impactradius-go.com/display-ad/21274-1825518"
-                alt="Spaceship affiliate ad"
-                height={201}
-                width={384}
-              />
-            </Link>
+        </>
+      }
+    >
+      {env.NEXT_PUBLIC_IS_MAIN_INSTANCE === '1' && (
+        <>
+          <Link
+            id="1825518"
+            target="_blank"
+            href={
+              'https://spaceship.sjv.io/c/5212322/1825518/21274?u=' +
+              encodeURIComponent(
+                `https://www.spaceship.com/domain-search/?query=${domain}&tab=domains`
+              )
+            }
+          >
             <Image
-              src="https://imp.pxf.io/i/5212322/1825518/21274"
-              className="invisible absolute"
-              unoptimized
-              height={0}
-              width={0}
-              alt=""
+              className="rounded-lg shadow-lg transition-opacity hover:opacity-90"
+              src="https://a.impactradius-go.com/display-ad/21274-1825518"
+              alt="Spaceship affiliate ad"
+              height={201}
+              width={384}
             />
-          </>
-        )}
-      </div>
-    </Card>
+          </Link>
+          <Image
+            src="https://imp.pxf.io/i/5212322/1825518/21274"
+            className="invisible absolute"
+            unoptimized
+            height={0}
+            width={0}
+            alt=""
+          />
+        </>
+      )}
+    </ErrorState>
   );
 }
diff --git a/src/app/(tools)/(domain)/whois/[domain]/page.tsx b/src/app/(tools)/(domain)/whois/[domain]/page.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
 import { Date } from '@/components/date';
+import { ErrorState } from '@/components/error-state';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
@@ -55,14 +56,21 @@ export default async function WhoisLookupResultPage({
 
   const result = await getCachedWhoisLookup(domain);
   if (!result.success) {
-    if (result.error !== 'domain_not_found') {
-      // TODO: Add some kind of component that shows the error code
-      notFound();
-    }
     return (
       <>
         <DomainHeader domain={domain} searchAgainForm={WhoisLookupForm} />
-        <DomainNotRegistered domain={domain} />
+        {result.error === 'domain_not_found' ? (
+          <DomainNotRegistered domain={domain} />
+        ) : (
+          <ErrorState
+            description={
+              <p>
+                Error code:{' '}
+                <span className="font-mono text-sm">{result.error}</span>
+              </p>
+            }
+          />
+        )}
       </>
     );
   }

diff --git a/src/components/error-state.tsx b/src/components/error-state.tsx
@@ -0,0 +1,28 @@
+import type { PropsWithChildren } from 'react';
+
+import { XCircleIcon } from './icons/x-circle';
+import { Card } from './ui/card';
+
+interface ErrorStateProps extends PropsWithChildren {
+  title?: string;
+  description: JSX.Element;
+}
+
+export function ErrorState({
+  title = 'An unexpected error occurred.',
+  description,
+  children
+}: ErrorStateProps) {
+  return (
+    <Card className="p-4">
+      <div className="flex min-h-48 flex-col items-center gap-4 rounded-lg border-4 border-dotted border-muted-foreground/15 px-4 py-12 text-center">
+        <XCircleIcon className="size-20" />
+        <h1 className="max-w-xs text-4xl font-semibold tracking-tighter">
+          {title}
+        </h1>
+        <div className="max-w-sm text-balance">{description}</div>
+        {children}
+      </div>
+    </Card>
+  );
+}