Switch to JSX-style conditional rendering for DomainCard (Property component)

src/components/DomainCard.tsx

@@ -1,47 +1,39 @@
-import type {FunctionComponent, ReactNode} from "react";
-import React, {Fragment} from "react";
+import type {FunctionComponent} from "react";
+import React from "react";
 import {rdapStatusInfo} from "@/constants";
-import type {Domain} from "@/schema";
+import type {Domain} from "@/types";
 import Events from "@/components/Events"
+import Property from "@/components/Property";
 
 export type DomainProps = {
     data: Domain;
 };
 
 const DomainCard: FunctionComponent<DomainProps> = ({data}: DomainProps) => {
-    const properties: [string | ReactNode, string | ReactNode][] = [];
-
-    if (data.unicodeName) {
-        properties.push(["Name", data.unicodeName]);
-        properties.push(["ASCII Name", data.ldhName]);
-    } else {
-        properties.push(["Name", data.ldhName])
-    }
-
-    properties.push(["Handle", data.handle]);
-    properties.push(["Events", <Events key={0} data={data.events} />])
-
-    properties.push([
-        "Status",
-        <ul key={2} className="list-disc">
-            {data.status.map((statusKey, index) =>
-                <li title={rdapStatusInfo[statusKey]} key={index}>
-                    {statusKey}
-                </li>)}
-        </ul>
-    ])
     return <div className="card">
         <div className="card-header">{data.ldhName ?? data.unicodeName} ({data.handle})</div>
         <div className="card-body">
             <dl>
-                {
-                    properties.map(([name, value], index) => {
-                            return <Fragment key={index}>
-                                <dt>{name}:</dt>
-                                <dd className="mt-2 mb-2 ml-6">{value}</dd>
-                            </Fragment>
-                        }
-                    )}
+                {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>

src/components/Property.tsx

@@ -0,0 +1,19 @@
+import type {FunctionComponent, ReactFragment, ReactNode} from "react";
+import React from "react";
+import {classNames} from "@/helpers";
+
+type PropertyProps = {
+    title: string | ReactNode | ReactFragment;
+    children: string | ReactNode | ReactFragment;
+    titleClass?: string;
+    valueClass?: string;
+};
+
+const Property: FunctionComponent<PropertyProps> = ({title, children, titleClass, valueClass}) => {
+    return <>
+        <dt className={titleClass}>{title}:</dt>
+        <dd className={classNames("mt-2 mb-2 ml-6", valueClass)}>{children}</dd>
+    </>
+}
+
+export default Property;