DNS Records Table

1"use client";
2 
3import * as React from "react";
4import type { DnsRecord, DomainIssue } from "@opencoredev/domain-sdk";
5import {
6  Alert02Icon,
7  CheckmarkCircle02Icon,
8  Copy01Icon,
9  HelpCircleIcon,
10  TimeQuarter02Icon,
11} from "@hugeicons/core-free-icons";
12import { HugeiconsIcon } from "@hugeicons/react";
13 
14import { Badge } from "@/components/ui/badge";
15import { Button } from "@/components/ui/button";
16import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
17import {
18  Table,
19  TableBody,
20  TableCell,
21  TableHead,
22  TableHeader,
23  TableRow,
24} from "@/components/ui/table";
25import {
26  filterDnsRecords,
27  issuesForRecord,
28  type DnsRecordFilter,
29} from "@/components/domain/domain-registry-utils";
30 
31export type DnsRecordCopyField = "name" | "value";
32 
33export interface DnsRecordsTableProps {
34  records: readonly DnsRecord[];
35  issues?: readonly DomainIssue[];
36  defaultFilter?: DnsRecordFilter;
37  onCopy?(content: string, record: DnsRecord, field: DnsRecordCopyField): void | Promise<void>;
38}
39 
40const statusMeta = {
41  valid: {
42    label: "Valid",
43    icon: CheckmarkCircle02Icon,
44    variant: "outline",
45    className:
46      "border-transparent bg-primary/10 text-primary bg-[var(--dns-success)] text-[var(--dns-success-foreground)]",
47  },
48  pending: {
49    label: "Pending",
50    icon: TimeQuarter02Icon,
51    variant: "outline",
52    className:
53      "border-transparent bg-secondary text-secondary-foreground bg-[var(--dns-warning)] text-[var(--dns-warning-foreground)]",
54  },
55  invalid: {
56    label: "Invalid",
57    icon: Alert02Icon,
58    variant: "destructive",
59    className: "",
60  },
61  unknown: {
62    label: "Unknown",
63    icon: HelpCircleIcon,
64    variant: "outline",
65    className: "",
66  },
67} as const;
68 
69const dnsStatusStyle = {
70  "--dns-success": "light-dark(oklch(0.94 0.06 150), oklch(0.28 0.07 150))",
71  "--dns-success-foreground": "light-dark(oklch(0.34 0.12 150), oklch(0.84 0.13 150))",
72  "--dns-warning": "light-dark(oklch(0.95 0.07 85), oklch(0.29 0.07 75))",
73  "--dns-warning-foreground": "light-dark(oklch(0.4 0.11 70), oklch(0.86 0.13 85))",
74} as React.CSSProperties;
75 
76const copyableFieldClassName = {
77  desktop:
78    "h-auto min-h-12 w-full touch-manipulation justify-between rounded-none px-4 py-3 text-left whitespace-normal",
79  mobile:
80    "h-auto min-h-10 w-full touch-manipulation justify-between rounded-md px-2 py-2 text-left whitespace-normal",
81} as const;
82 
83const copyFeedbackClassName = {
84  copied:
85// … truncated