Add Whois quick info 👀

app/error.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { type FC, useEffect } from 'react';
+
+type GlobalErrorProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+const GlobalError: FC<GlobalErrorProps> = ({ error }) => {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mt-12 flex flex-col items-center gap-2">
+      <h2>Something went VERY wrong!</h2>
+      <p className="mt-2 text-center text-sm text-muted-foreground">
+        Digest: {error.digest}
+      </p>
+    </div>
+  );
+};
+
+export default GlobalError;

app/lookup/[domain]/certs/page.tsx

@@ -45,10 +45,6 @@ type CertsResultsPageProps = {
   };
 };
 
-export const runtime = 'edge';
-// crt.sh located in GB, always use LHR1 for lowest latency
-export const preferredRegion = 'lhr1';
-
 const CertsResultsPage: FC<CertsResultsPageProps> = async ({
   params: { domain },
 }) => {

app/lookup/[domain]/layout.tsx

@@ -1,10 +1,13 @@
 import { ExternalLinkIcon } from 'lucide-react';
 import type { Metadata } from 'next';
-import type { FC, ReactNode } from 'react';
+import { type FC, type ReactNode, Suspense } from 'react';
 
 import RelatedDomains from '@/components/RelatedDomains';
 import ResultsTabs from '@/components/ResultsTabs';
 import SearchForm from '@/components/SearchForm';
+import WhoisQuickInfo, {
+  WhoisQuickInfoPlaceholder,
+} from '@/components/WhoisQuickInfo';
 
 type LookupLayoutProps = {
   children: ReactNode;
@@ -54,6 +57,10 @@ const LookupLayout: FC<LookupLayoutProps> = ({
         </h1>
 
         <RelatedDomains domain={domain} />
+        <Suspense fallback={<WhoisQuickInfoPlaceholder />}>
+          {/* TODO Add error boundary */}
+          <WhoisQuickInfo domain={domain} />
+        </Suspense>
         <ResultsTabs domain={domain} />
 
         {children}

components/WhoisQuickInfo.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import whoiser, { type WhoisSearchResult } from 'whoiser';
+
+import { Skeleton } from './ui/skeleton';
+
+type WhoisQuickInfoProps = {
+  domain: string;
+};
+
+const WhoisQuickInfo: FC<WhoisQuickInfoProps> = async ({ domain }) => {
+  const results = await whoiser(domain, {
+    timeout: 3000,
+  });
+  const firstResult = results[Object.keys(results)[0]] as WhoisSearchResult;
+
+  return (
+    <div className="my-8 flex gap-8">
+      <div>
+        <h3 className="text-xs text-muted-foreground">Registrar</h3>
+        <p className="text-sm">{firstResult['Registrar'].toString()}</p>
+      </div>
+      <div>
+        <h3 className="text-xs text-muted-foreground">Creation Date</h3>
+        <p className="text-sm">
+          {new Date(firstResult['Created Date'].toString()).toLocaleDateString(
+            'en-US'
+          )}
+        </p>
+      </div>
+      <div>
+        <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
+        <p className="text-sm">{firstResult['DNSSEC'].toString()}</p>
+      </div>
+    </div>
+  );
+};
+
+export default WhoisQuickInfo;
+
+export const WhoisQuickInfoPlaceholder: FC = () => (
+  <div className="my-8 flex gap-8">
+    <div>
+      <h3 className="text-xs text-muted-foreground">Registrar</h3>
+      <Skeleton className="mt-1 h-4 w-24 rounded-sm" />
+    </div>
+    <div>
+      <h3 className="text-xs text-muted-foreground">Creation Date</h3>
+      <Skeleton className="w-18 mt-1 h-4 rounded-sm" />
+    </div>
+    <div>
+      <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
+      <Skeleton className="mt-1 h-4 w-16 rounded-sm" />
+    </div>
+  </div>
+);