use tabular nums for easier readability

aelew · Feb 6, 2024 · 277abb4 · 277abb4
1 parent c0de4a5
commit 277abb4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/src/app/(tools)/(domain)/dns/[domain]/page.tsx b/src/app/(tools)/(domain)/dns/[domain]/page.tsx
@@ -159,7 +159,7 @@ export default async function DNSLookupResultPage({
                               {match(record.type)
                                 .with('A', 'AAAA', () => (
                                   <Link
-                                    className="whitespace-nowrap hover:underline"
+                                    className="whitespace-nowrap tabular-nums hover:underline"
                                     href={`/ip/${value}`}
                                   >
                                     {value}

diff --git a/src/app/(tools)/(domain)/subdomain/[domain]/page.tsx b/src/app/(tools)/(domain)/subdomain/[domain]/page.tsx
@@ -118,7 +118,7 @@ export default async function SubdomainFinderResultPage({
                             )}
                           />
                           <Link
-                            className="whitespace-nowrap hover:underline"
+                            className="whitespace-nowrap tabular-nums hover:underline"
                             href={`/ip/${record.ip}`}
                           >
                             {record.ip}
@@ -144,7 +144,9 @@ export default async function SubdomainFinderResultPage({
                       <TableCell className="w-36 font-medium">
                         Subdomains found
                       </TableCell>
-                      <TableCell>{result.length}</TableCell>
+                      <TableCell className="tabular-nums">
+                        {result.length}
+                      </TableCell>
                     </TableRow>
                     <TableRow>
                       <TableCell className="w-36 font-medium">
@@ -154,7 +156,7 @@ export default async function SubdomainFinderResultPage({
                         {mostCommonIp ? (
                           <div className="flex items-center">
                             <Link
-                              className="whitespace-nowrap hover:underline"
+                              className="whitespace-nowrap tabular-nums hover:underline"
                               href={`/ip/${mostCommonIp}`}
                             >
                               {mostCommonIp}
@@ -186,7 +188,7 @@ export default async function SubdomainFinderResultPage({
                     {Object.entries(ipStore)
                       .sort(([_, a], [__, b]) => b - a)
                       .map(([ip, occurrences]) => (
-                        <TableRow key={ip}>
+                        <TableRow className="tabular-nums" key={ip}>
                           <TableCell>
                             <div className="flex items-center">
                               <CloudflareIcon

diff --git a/src/app/(tools)/(domain)/whois/[domain]/page.tsx b/src/app/(tools)/(domain)/whois/[domain]/page.tsx
@@ -115,18 +115,18 @@ export default async function WhoisLookupResultPage({
             }
           />
         ),
-        Updated: () => (
+        Expires: () => (
           <Date
             dateTime={
-              result.domain.updated_date_in_time ?? result.domain.updated_date
+              result.domain.expiration_date_in_time ??
+              result.domain.expiration_date
             }
           />
         ),
-        Expires: () => (
+        Updated: () => (
           <Date
             dateTime={
-              result.domain.expiration_date_in_time ??
-              result.domain.expiration_date
+              result.domain.updated_date_in_time ?? result.domain.updated_date
             }
           />
         ),

diff --git a/src/components/date.tsx b/src/components/date.tsx
@@ -10,5 +10,9 @@ export function Date({ dateTime }: DateProps) {
   if (!dateTime) {
     return null;
   }
-  return <time dateTime={dateTime}>{formatDate(dateTime)}</time>;
+  return (
+    <time className="tabular-nums" dateTime={dateTime}>
+      {formatDate(dateTime)}
+    </time>
+  );
 }