feat: add CopyButton and StatusBadge components with enhanced RDAP card UX

This commit introduces two new reusable components and significantly
improves the user experience across all RDAP cards:

New Components:
- CopyButton: Provides one-click copying functionality for handles,
  addresses, and other identifiers
- StatusBadge: Displays color-coded status badges with proper type
  safety

RDAP Card Enhancements:
- Replace deprecated ClipboardCopyIcon with ClipboardIcon
- Add copy buttons next to all handles, addresses, and identifiers
- Migrate status displays from PropertyList to StatusBadge components
  with color coding
- Replace PropertyList with proper DataList components for roles and
  public IDs
- Improve Events table layout and styling
- Wrap all copyable values in Code components for better visual
  distinction

Type Safety Improvements:
- Add rdapStatusColors mapping with proper Radix UI badge color types
- Update IpNetwork and AutonomousNumber schemas to use typed
  StatusEnum arrays
This commit is contained in:
2025-10-22 12:56:30 -05:00
parent 0e9336df1d
commit 335bc6aee8
11 changed files with 308 additions and 79 deletions

View File

@@ -1,7 +1,7 @@
import type { FunctionComponent, ReactNode } from "react";
import React from "react";
import { useBoolean } from "usehooks-ts";
import { Link2Icon, CodeIcon, DownloadIcon, ClipboardCopyIcon } from "@radix-ui/react-icons";
import { Link2Icon, CodeIcon, DownloadIcon, ClipboardIcon } from "@radix-ui/react-icons";
import { Card, Flex, Box, IconButton, Code, ScrollArea } from "@radix-ui/themes";
type AbstractCardProps = {
@@ -75,7 +75,7 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
}}
aria-label="Copy JSON to clipboard"
>
<ClipboardCopyIcon width="18" height="18" />
<ClipboardIcon width="18" height="18" />
</IconButton>
<IconButton
variant="ghost"