add clsx, add bottom padding for ErrorCard

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",

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" />

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}

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"