From 2c67f49e2f3a0faf346a453a2f3d81616462751e Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 23 Oct 2025 15:14:57 -0500
Subject: [PATCH] refactor: introduce EmDash component and improve table
 semantics

Created a reusable EmDash component to standardize placeholder rendering
across tables. Updated DynamicDate to use semantic <time> element instead
of Button wrapper. Improved table alignment with proper left/center/right
positioning in LinksSection and NameserversSection. Enhanced typography in
RemarksSection with medium font weight for headings.
---
 src/components/DynamicDate.tsx             | 16 +++++++++++----
 src/components/EmDash.tsx                  | 21 ++++++++++++++++++++
 src/rdap/components/Events.tsx             |  5 ++---
 src/rdap/components/LinksSection.tsx       | 23 +++++++---------------
 src/rdap/components/NameserversSection.tsx | 15 ++++++--------
 src/rdap/components/RemarksSection.tsx     |  4 +++-
 6 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 src/components/EmDash.tsx

diff --git a/src/components/DynamicDate.tsx b/src/components/DynamicDate.tsx
index a728f65..3c8a546 100644
--- a/src/components/DynamicDate.tsx
+++ b/src/components/DynamicDate.tsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { format } from "date-fns";
 import { formatInTimeZone } from "date-fns-tz";
 import TimeAgo from "react-timeago";
-import { Box, Button, Tooltip, Text, Flex } from "@radix-ui/themes";
+import { Box, Tooltip, Text, Flex } from "@radix-ui/themes";
 import { useDateFormat } from "@/contexts/DateFormatContext";
 
 type DynamicDateProps = {
@@ -65,9 +65,17 @@ const DynamicDate: FunctionComponent<DynamicDateProps> = ({
 				</Box>
 			}
 		>
-			<Button variant="ghost" size="1" onClick={toggleFormat} style={{ cursor: "pointer" }}>
-				<Text size="2">{displayValue}</Text>
-			</Button>
+			<time
+				dateTime={isoString}
+				onClick={toggleFormat}
+				style={{
+					cursor: "pointer",
+					textDecoration: "none",
+					fontSize: "var(--font-size-2)",
+				}}
+			>
+				{displayValue}
+			</time>
 		</Tooltip>
 	);
 };
diff --git a/src/components/EmDash.tsx b/src/components/EmDash.tsx
new file mode 100644
index 0000000..4287ecf
--- /dev/null
+++ b/src/components/EmDash.tsx
@@ -0,0 +1,21 @@
+import type { FunctionComponent } from "react";
+import { Text } from "@radix-ui/themes";
+
+/**
+ * A reusable em dash component for displaying placeholder text in tables.
+ */
+const EmDash: FunctionComponent = () => {
+	return (
+		<Text
+			size="2"
+			style={{
+				color: "var(--gray-a8)",
+				userSelect: "none",
+			}}
+		>
+			&mdash;
+		</Text>
+	);
+};
+
+export default EmDash;
diff --git a/src/rdap/components/Events.tsx b/src/rdap/components/Events.tsx
index fbc9386..04a7bfa 100644
--- a/src/rdap/components/Events.tsx
+++ b/src/rdap/components/Events.tsx
@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import type { Event } from "@/rdap/schemas";
 import DynamicDate from "@/components/DynamicDate";
+import EmDash from "@/components/EmDash";
 import { Table, Text } from "@radix-ui/themes";
 
 export type EventsProps = {
@@ -32,9 +33,7 @@ const Events: FunctionComponent<EventsProps> = ({ data }) => {
 									{eventActor}
 								</Text>
 							) : (
-								<Text size="2" style={{ color: "var(--gray-a4)" }}>
-									—
-								</Text>
+								<EmDash />
 							)}
 						</Table.Cell>
 					</Table.Row>
diff --git a/src/rdap/components/LinksSection.tsx b/src/rdap/components/LinksSection.tsx
index 401bc39..d7bf67d 100644
--- a/src/rdap/components/LinksSection.tsx
+++ b/src/rdap/components/LinksSection.tsx
@@ -2,6 +2,7 @@ import type { FunctionComponent } from "react";
 import React from "react";
 import type { Link as RdapLink } from "@/rdap/schemas";
 import { Table, Link, Text, Badge } from "@radix-ui/themes";
+import EmDash from "@/components/EmDash";
 
 export type LinksSectionProps = {
 	links: RdapLink[];
@@ -28,35 +29,25 @@ const LinksSection: FunctionComponent<LinksSectionProps> = ({ links }) => {
 								{link.href}
 							</Link>
 						</Table.Cell>
-						<Table.Cell>
+						<Table.Cell align="center">
 							{link.rel ? (
 								<Badge variant="soft" size="1">
 									{link.rel}
 								</Badge>
 							) : (
-								<Text size="2" style={{ color: "var(--gray-a6)" }}>
-									—
-								</Text>
+								<EmDash />
 							)}
 						</Table.Cell>
-						<Table.Cell>
-							{link.title ? (
-								<Text size="2">{link.title}</Text>
-							) : (
-								<Text size="2" style={{ color: "var(--gray-a6)" }}>
-									—
-								</Text>
-							)}
+						<Table.Cell align="center">
+							{link.title ? <Text size="2">{link.title}</Text> : <EmDash />}
 						</Table.Cell>
-						<Table.Cell>
+						<Table.Cell align="right">
 							{link.type ? (
 								<Text size="2" color="gray">
 									{link.type}
 								</Text>
 							) : (
-								<Text size="2" style={{ color: "var(--gray-a6)" }}>
-									—
-								</Text>
+								<EmDash />
 							)}
 						</Table.Cell>
 					</Table.Row>
diff --git a/src/rdap/components/NameserversSection.tsx b/src/rdap/components/NameserversSection.tsx
index fbd144a..b88c4a4 100644
--- a/src/rdap/components/NameserversSection.tsx
+++ b/src/rdap/components/NameserversSection.tsx
@@ -1,8 +1,9 @@
 import type { FunctionComponent } from "react";
 import React from "react";
 import type { Nameserver } from "@/rdap/schemas";
-import { Table, Text, Code, Flex, Badge } from "@radix-ui/themes";
+import { Table, Code, Flex, Badge } from "@radix-ui/themes";
 import CopyButton from "@/components/CopyButton";
+import EmDash from "@/components/EmDash";
 
 export type NameserversSectionProps = {
 	nameservers: Nameserver[];
@@ -39,7 +40,7 @@ const NameserversSection: FunctionComponent<NameserversSectionProps> = ({ namese
 								</Flex>
 							)}
 						</Table.Cell>
-						<Table.Cell>
+						<Table.Cell align="center">
 							{ns.ipAddresses?.v4 && ns.ipAddresses.v4.length > 0 ? (
 								<Flex direction="column" gap="1">
 									{ns.ipAddresses.v4.map((ip, ipIndex) => (
@@ -52,12 +53,10 @@ const NameserversSection: FunctionComponent<NameserversSectionProps> = ({ namese
 									))}
 								</Flex>
 							) : (
-								<Text size="2" style={{ color: "var(--gray-a4)" }}>
-									—
-								</Text>
+								<EmDash />
 							)}
 						</Table.Cell>
-						<Table.Cell>
+						<Table.Cell align="right">
 							{ns.ipAddresses?.v6 && ns.ipAddresses.v6.length > 0 ? (
 								<Flex direction="column" gap="1">
 									{ns.ipAddresses.v6.map((ip, ipIndex) => (
@@ -70,9 +69,7 @@ const NameserversSection: FunctionComponent<NameserversSectionProps> = ({ namese
 									))}
 								</Flex>
 							) : (
-								<Text size="2" style={{ color: "var(--gray-a4)" }}>
-									—
-								</Text>
+								<EmDash />
 							)}
 						</Table.Cell>
 					</Table.Row>
diff --git a/src/rdap/components/RemarksSection.tsx b/src/rdap/components/RemarksSection.tsx
index 42b55d8..1749e90 100644
--- a/src/rdap/components/RemarksSection.tsx
+++ b/src/rdap/components/RemarksSection.tsx
@@ -26,7 +26,9 @@ const RemarksSection: FunctionComponent<RemarksSectionProps> = ({ remarks }) =>
 					<Flex direction="column" gap="2">
 						{remark.title && (
 							<Flex align="center" gap="2">
-								<Heading size="3">{remark.title}</Heading>
+								<Heading size="3" weight="medium">
+									{remark.title}
+								</Heading>
 								{remark.type && (
 									<Badge variant="soft" size="1">
 										{remark.type}