From 425240e39bfdaf29086ab9357206cf6608ee4c93 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Sat, 26 Aug 2023 00:18:18 -0500
Subject: [PATCH] Add separate description prop for ErrorCard, lighten header
 line, fix typo

---
 src/components/common/ErrorCard.tsx | 18 +++++++++++++-----
 src/pages/index.tsx                 |  4 ++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/common/ErrorCard.tsx b/src/components/common/ErrorCard.tsx
index f7ed687..891bc6b 100644
--- a/src/components/common/ErrorCard.tsx
+++ b/src/components/common/ErrorCard.tsx
@@ -2,20 +2,28 @@ import { FunctionComponent, ReactNode } from "react";
 import { XCircleIcon } from "@heroicons/react/20/solid";
 
 export type ErrorCardProps = {
-  title: string;
+  title: ReactNode;
+  description?: ReactNode;
   issues?: ReactNode[];
 };
 
-const ErrorCard: FunctionComponent<ErrorCardProps> = ({ title, issues }) => {
+const ErrorCard: FunctionComponent<ErrorCardProps> = ({
+  title,
+  description,
+  issues,
+}) => {
   return (
     <div className="rounded-md border border-red-700/30 bg-zinc-800 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
           <XCircleIcon className="h-5 w-5 text-red-300" aria-hidden="true" />
         </div>
-        <div className="ml-3">
-          <h3 className="text-sm font-medium text-red-300">{title}</h3>
-          <div className="mt-2 text-sm text-red-300">
+        <div className="ml-3 text-sm text-red-300">
+          <h3 className="font-medium text-red-200">{title}</h3>
+          {description != undefined ? (
+            <div className="mt-2">{description}</div>
+          ) : null}
+          <div className="mt-2">
             {issues != undefined ? (
               <ul role="list" className="list-disc space-y-1 pl-5">
                 {issues.map((issueText, index) => (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 66dfd1c..0142a41 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -52,8 +52,8 @@ const Index: NextPage = () => {
           />
           {error != null ? (
             <ErrorCard
-              title="An error ocurred while performing a lookup."
-              issues={[error]}
+              title="An error occurred while performing a lookup."
+              description={error}
             />
           ) : null}
           {response != null ? <Generic data={response} /> : null}