Add separate description prop for ErrorCard, lighten header line, fix typo

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">
+        <div className="ml-3 text-sm text-red-300">
-          <h3 className="text-sm font-medium text-red-300">{title}</h3>
+          <h3 className="font-medium text-red-200">{title}</h3>
-          <div className="mt-2 text-sm text-red-300">
+          {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) => (

src/pages/index.tsx

@@ -52,8 +52,8 @@ const Index: NextPage = () => {
           />
           {error != null ? (
             <ErrorCard
-              title="An error ocurred while performing a lookup."
+              title="An error occurred while performing a lookup."
-              issues={[error]}
+              description={error}
             />
           ) : null}
           {response != null ? <Generic data={response} /> : null}