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 = ({ } > - + ); }; 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 ( + + — + + ); +}; + +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 = ({ data }) => { {eventActor} ) : ( - - — - + )} 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 = ({ links }) => { {link.href} - + {link.rel ? ( {link.rel} ) : ( - - — - + )} - - {link.title ? ( - {link.title} - ) : ( - - — - - )} + + {link.title ? {link.title} : } - + {link.type ? ( {link.type} ) : ( - - — - + )} 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 = ({ namese )} - + {ns.ipAddresses?.v4 && ns.ipAddresses.v4.length > 0 ? ( {ns.ipAddresses.v4.map((ip, ipIndex) => ( @@ -52,12 +53,10 @@ const NameserversSection: FunctionComponent = ({ namese ))} ) : ( - - — - + )} - + {ns.ipAddresses?.v6 && ns.ipAddresses.v6.length > 0 ? ( {ns.ipAddresses.v6.map((ip, ipIndex) => ( @@ -70,9 +69,7 @@ const NameserversSection: FunctionComponent = ({ namese ))} ) : ( - - — - + )} 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 = ({ remarks }) => {remark.title && ( - {remark.title} + + {remark.title} + {remark.type && ( {remark.type}