From 3b20643892b571dfa76a3b3c59a3615e736b7343 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Tue, 23 May 2023 22:54:57 -0500
Subject: [PATCH] AbstractCard for universal card styling, use AbstractCard &
 PropertyList for DomainCard

---
 src/components/common/AbstractCard.tsx | 27 ++++++++++++
 src/components/lookup/DomainCard.tsx   | 59 +++++++++++++-------------
 2 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100644 src/components/common/AbstractCard.tsx

diff --git a/src/components/common/AbstractCard.tsx b/src/components/common/AbstractCard.tsx
new file mode 100644
index 0000000..dfa71bc
--- /dev/null
+++ b/src/components/common/AbstractCard.tsx
@@ -0,0 +1,27 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+type AbstractCardProps = {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+};
+
+const AbstractCard: FunctionComponent<AbstractCardProps> = ({
+  children,
+  header,
+  footer,
+}) => {
+  return (
+    <div className="mb-4 overflow-clip rounded bg-zinc-800 shadow">
+      {header != null ? (
+        <div className="space-x-2 bg-zinc-700 p-2 pl-5">{header}</div>
+      ) : null}
+      <div className="p-2 px-4">{children}</div>
+      {footer != null ? (
+        <div className="space-x-2 bg-zinc-700 p-2 pl-5">{footer}</div>
+      ) : null}
+    </div>
+  );
+};
+
+export default AbstractCard;
diff --git a/src/components/lookup/DomainCard.tsx b/src/components/lookup/DomainCard.tsx
index 83fc305..381f36d 100644
--- a/src/components/lookup/DomainCard.tsx
+++ b/src/components/lookup/DomainCard.tsx
@@ -4,6 +4,8 @@ import { rdapStatusInfo } from "@/constants";
 import type { Domain } from "@/types";
 import Events from "@/components/lookup/Events";
 import Property from "@/components/common/Property";
+import PropertyList from "@/components/common/PropertyList";
+import AbstractCard from "@/components/common/AbstractCard";
 
 export type DomainProps = {
   data: Domain;
@@ -11,35 +13,34 @@ export type DomainProps = {
 
 const DomainCard: FunctionComponent<DomainProps> = ({ data }: DomainProps) => {
   return (
-    <div className="mb-4 overflow-clip rounded bg-zinc-800">
-      <div className="bg-zinc-700 p-2 pl-5">
-        <span className="font-mono">{data.ldhName ?? data.unicodeName}</span> (
-        {data.handle})
-      </div>
-      <div className="p-2 px-4">
-        <dl>
-          {data.unicodeName != undefined ? (
-            <Property title="Unicode Name">{data.unicodeName}</Property>
-          ) : null}
-          <Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
-            {data.ldhName}
-          </Property>
-          <Property title="Handle">{data.handle}</Property>
-          <Property title="Events">
-            <Events key={0} data={data.events} />
-          </Property>
-          <Property title="Status">
-            <ul key={2} className="list-disc">
-              {data.status.map((statusKey, index) => (
-                <li key={index}>
-                  <span title={rdapStatusInfo[statusKey]}>{statusKey}</span>
-                </li>
-              ))}
-            </ul>
-          </Property>
-        </dl>
-      </div>
-    </div>
+    <AbstractCard
+      header={
+        <>
+          <span className="font-mono">{data.ldhName ?? data.unicodeName}</span>
+          <span>({data.handle})</span>
+        </>
+      }
+    >
+      <dl>
+        {data.unicodeName != undefined ? (
+          <Property title="Unicode Name">{data.unicodeName}</Property>
+        ) : null}
+        <Property title={data.unicodeName != undefined ? "LHD Name" : "Name"}>
+          {data.ldhName}
+        </Property>
+        <Property title="Handle">{data.handle}</Property>
+        <Property title="Events">
+          <Events key={0} data={data.events} />
+        </Property>
+        <PropertyList title="Status">
+          {data.status.map((statusKey, index) => (
+            <PropertyList.Item key={index} title={rdapStatusInfo[statusKey]}>
+              {statusKey}
+            </PropertyList.Item>
+          ))}
+        </PropertyList>
+      </dl>
+    </AbstractCard>
   );
 };