Create ErrorCard component for displaying errors better

src/components/common/ErrorCard.tsx

@@ -0,0 +1,33 @@
+import { FunctionComponent, ReactNode } from "react";
+import { XCircleIcon } from "@heroicons/react/20/solid";
+
+export type ErrorCardProps = {
+  title: string;
+  issues?: ReactNode[];
+};
+
+const ErrorCard: FunctionComponent<ErrorCardProps> = ({ title, 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">
+            {issues != undefined ? (
+              <ul role="list" className="list-disc space-y-1 pl-5">
+                {issues.map((issueText, index) => (
+                  <li key={index}>{issueText}</li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorCard;

src/pages/index.tsx

@@ -5,6 +5,7 @@ import Generic, { type ParsedGeneric } from "@/components/lookup/Generic";
 import useLookup from "@/hooks/useLookup";
 import { OGP } from "react-ogp";
 import LookupInput from "@/components/form/LookupInput";
+import ErrorCard from "@/components/common/ErrorCard";
 
 const Index: NextPage = () => {
   const { error, setTarget, submit } = useLookup();
@@ -50,9 +51,10 @@ const Index: NextPage = () => {
             }}
           />
           {error != null ? (
-            <div className="my-3 mx-7 rounded border-2 border-red-800/40 bg-zinc-700 p-2 text-zinc-300">
+            <ErrorCard
-              {error}
+              title="An error ocurred while performing a lookup."
-            </div>
+              issues={[error]}
+            />
           ) : null}
           {response != null ? <Generic data={response} /> : null}
         </div>