From f37e6f87a25f11ed7f9611c6d43435af0ee00245 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 9 May 2024 02:15:11 -0500
Subject: [PATCH] add clsx, add bottom padding for ErrorCard

---
 package.json                        | 1 +
 src/components/common/ErrorCard.tsx | 7 +++++--
 src/pages/index.tsx                 | 1 +
 yarn.lock                           | 5 +++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cadce1c..f78fbb3 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.11",
     "@heroicons/react": "^2.0.16",
+    "clsx": "^2.1.1",
     "date-fns": "^2.29.3",
     "immutability-helper": "^3.1.1",
     "ipaddr.js": "^2.0.1",
diff --git a/src/components/common/ErrorCard.tsx b/src/components/common/ErrorCard.tsx
index 2d8d7ba..93322df 100644
--- a/src/components/common/ErrorCard.tsx
+++ b/src/components/common/ErrorCard.tsx
@@ -1,19 +1,22 @@
-import { FunctionComponent, ReactNode } from "react";
+import type { FunctionComponent, ReactNode } from "react";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 
 export type ErrorCardProps = {
   title: ReactNode;
   description?: ReactNode;
   issues?: ReactNode[];
+  className?: string;
 };
 
 const ErrorCard: FunctionComponent<ErrorCardProps> = ({
   title,
   description,
   issues,
+  className,
 }) => {
   return (
-    <div className="rounded-md border border-red-700/30 bg-zinc-800 p-4">
+    <div className={clsx(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" />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6f64d6c..8b714ba 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -54,6 +54,7 @@ const Index: NextPage = () => {
             <ErrorCard
               title="An error occurred while performing a lookup."
               description={error}
+              className="mb-2"
             />
           ) : null}
           {response != null ? <Generic data={response} /> : null}
diff --git a/yarn.lock b/yarn.lock
index 349bc97..4198d25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -554,6 +554,11 @@ client-only@0.0.1, client-only@^0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"