{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dns-record-manager", "title": "Dns Record Manager", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/dns-record-manager/DnsRecordManager.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Check,\n Cloud,\n CloudOff,\n Copy,\n Download,\n Edit2,\n FileCode,\n Globe,\n MoreHorizontal,\n Plus,\n Search,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type DnsRecordType = 'A' | 'AAAA' | 'CNAME' | 'MX' | 'TXT' | 'CAA'\n\nexport interface DnsRecord {\n id: string\n type: DnsRecordType\n name: string\n content: string\n ttl: string\n proxied: boolean\n priority?: number\n comment?: string\n}\n\nexport interface DnsRecordManagerProps {\n domain?: string\n nameservers?: string[]\n dnssecEnabled?: boolean\n initialRecords?: DnsRecord[]\n initialAddOpen?: boolean\n className?: string\n}\n\nconst defaultRecords: DnsRecord[] = [\n {\n id: 'rec-1',\n type: 'A',\n name: '@',\n content: '76.76.21.21',\n ttl: 'Auto',\n proxied: true,\n comment: 'Apex production load balancer',\n },\n {\n id: 'rec-2',\n type: 'CNAME',\n name: 'www',\n content: 'cname.vercel-dns.com',\n ttl: 'Auto',\n proxied: true,\n comment: 'Primary web redirect',\n },\n {\n id: 'rec-3',\n type: 'CNAME',\n name: 'api',\n content: 'api-gateway.uipkge.net',\n ttl: '300s',\n proxied: false,\n comment: 'Direct REST gateway route',\n },\n {\n id: 'rec-4',\n type: 'AAAA',\n name: '@',\n content: '2606:4700:3038::6815:1515',\n ttl: 'Auto',\n proxied: true,\n comment: 'IPv6 edge ingress',\n },\n {\n id: 'rec-5',\n type: 'MX',\n name: 'mail',\n content: 'aspmx.l.google.com',\n ttl: '3600s',\n proxied: false,\n priority: 10,\n comment: 'Google Workspace MX',\n },\n {\n id: 'rec-6',\n type: 'TXT',\n name: '_dmarc',\n content: 'v=spf1 include:_spf.google.com ~all',\n ttl: '3600s',\n proxied: false,\n comment: 'Sender Policy Framework verification',\n },\n {\n id: 'rec-7',\n type: 'CAA',\n name: '@',\n content: '0 issue \"letsencrypt.org\"',\n ttl: 'Auto',\n proxied: false,\n comment: 'Certificate authority restriction',\n },\n]\n\nconst typeBadgeStyles: Record = {\n A: {\n bg: 'bg-info/10',\n text: 'text-info',\n border: 'border-info/30',\n },\n AAAA: {\n bg: 'bg-chart-1/10',\n text: 'text-chart-1',\n border: 'border-chart-1/30',\n },\n CNAME: {\n bg: 'bg-chart-2/10',\n text: 'text-chart-2',\n border: 'border-chart-2/30',\n },\n MX: {\n bg: 'bg-warning/10',\n text: 'text-warning',\n border: 'border-warning/30',\n },\n TXT: {\n bg: 'bg-success/10',\n text: 'text-success',\n border: 'border-success/30',\n },\n CAA: {\n bg: 'bg-info/10',\n text: 'text-info',\n border: 'border-info/30',\n },\n}\n\nconst placeholderMap: Record = {\n A: 'e.g. 76.76.21.21',\n AAAA: 'e.g. 2606:4700:3038::6815:1515',\n CNAME: 'e.g. cname.vercel-dns.com',\n MX: 'e.g. mail.google.com',\n TXT: 'e.g. v=spf1 include:_spf.google.com ~all',\n CAA: 'e.g. 0 issue \"letsencrypt.org\"',\n}\n\nexport function DnsRecordManager({\n domain = 'uipkge.dev',\n nameservers = ['ns1.uipkge.net', 'ns2.uipkge.net'],\n dnssecEnabled = true,\n initialRecords,\n initialAddOpen = false,\n className,\n}: DnsRecordManagerProps) {\n const [records, setRecords] = React.useState(() =>\n initialRecords ? initialRecords.map((r) => ({ ...r })) : defaultRecords.map((r) => ({ ...r })),\n )\n\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedTypeFilter, setSelectedTypeFilter] = React.useState('ALL')\n const [isAddOpen, setIsAddOpen] = React.useState(initialAddOpen)\n const [isZoneFileOpen, setIsZoneFileOpen] = React.useState(false)\n const [editingId, setEditingId] = React.useState(null)\n\n // Form states\n const [formType, setFormType] = React.useState('A')\n const [formName, setFormName] = React.useState('')\n const [formContent, setFormContent] = React.useState('')\n const [formTtl, setFormTtl] = React.useState('Auto')\n const [formProxied, setFormProxied] = React.useState(true)\n const [formPriority, setFormPriority] = React.useState(10)\n const [formComment, setFormComment] = React.useState('')\n\n const [copiedKey, setCopiedKey] = React.useState(null)\n const copyTimeoutRef = React.useRef(undefined)\n\n const copyText = React.useCallback(async (key: string, text: string) => {\n try {\n await navigator.clipboard.writeText(text)\n setCopiedKey(key)\n window.clearTimeout(copyTimeoutRef.current)\n copyTimeoutRef.current = window.setTimeout(() => {\n setCopiedKey(null)\n }, 1600)\n } catch {\n // Clipboard unavailable\n }\n }, [])\n\n const handleTypeChange = (newType: DnsRecordType) => {\n setFormType(newType)\n if (['MX', 'TXT', 'CAA'].includes(newType)) {\n setFormProxied(false)\n } else if (!editingId) {\n setFormProxied(true)\n }\n }\n\n const toggleProxy = (id: string) => {\n setRecords((prev) =>\n prev.map((r) => {\n if (r.id === id && ['A', 'AAAA', 'CNAME'].includes(r.type)) {\n return { ...r, proxied: !r.proxied }\n }\n return r\n }),\n )\n }\n\n const deleteRecord = (id: string) => {\n setRecords((prev) => prev.filter((r) => r.id !== id))\n if (editingId === id) {\n cancelForm()\n }\n }\n\n const startAdd = () => {\n setEditingId(null)\n setFormType('A')\n setFormName('')\n setFormContent('')\n setFormTtl('Auto')\n setFormProxied(true)\n setFormPriority(10)\n setFormComment('')\n setIsAddOpen(true)\n }\n\n const startEdit = (record: DnsRecord) => {\n setEditingId(record.id)\n setFormType(record.type)\n setFormName(record.name)\n setFormContent(record.content)\n setFormTtl(record.ttl)\n setFormProxied(record.proxied)\n setFormPriority(record.priority ?? 10)\n setFormComment(record.comment ?? '')\n setIsAddOpen(true)\n }\n\n const cancelForm = () => {\n setIsAddOpen(false)\n setEditingId(null)\n }\n\n const saveRecord = () => {\n const name = formName.trim() || '@'\n const content = formContent.trim()\n if (!content) return\n\n if (editingId) {\n setRecords((prev) =>\n prev.map((r) => {\n if (r.id === editingId) {\n return {\n ...r,\n type: formType,\n name,\n content,\n ttl: formTtl,\n proxied: ['A', 'AAAA', 'CNAME'].includes(formType) ? formProxied : false,\n priority: formType === 'MX' ? Number(formPriority) : undefined,\n comment: formComment.trim() || undefined,\n }\n }\n return r\n }),\n )\n } else {\n const newRecord: DnsRecord = {\n id: `rec-${Date.now()}`,\n type: formType,\n name,\n content,\n ttl: formTtl,\n proxied: ['A', 'AAAA', 'CNAME'].includes(formType) ? formProxied : false,\n priority: formType === 'MX' ? Number(formPriority) : undefined,\n comment: formComment.trim() || undefined,\n }\n setRecords((prev) => [newRecord, ...prev])\n }\n\n cancelForm()\n }\n\n const filteredRecords = React.useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n return records.filter((record) => {\n const matchesType = selectedTypeFilter === 'ALL' || record.type === selectedTypeFilter\n const matchesQuery =\n !query ||\n record.name.toLowerCase().includes(query) ||\n record.content.toLowerCase().includes(query) ||\n record.type.toLowerCase().includes(query) ||\n (record.comment && record.comment.toLowerCase().includes(query))\n return matchesType && matchesQuery\n })\n }, [records, searchQuery, selectedTypeFilter])\n\n const zoneFileContent = React.useMemo(() => {\n const date = new Date().toISOString().split('T')[0].replace(/-/g, '')\n const lines: string[] = [\n `; BIND zone file for ${domain}`,\n `; Generated on ${new Date().toUTCString()}`,\n `$ORIGIN ${domain}.`,\n `$TTL 3600`,\n ``,\n `; SOA Record`,\n `@ IN SOA ${nameservers[0]}. hostmaster.${domain}. (`,\n ` ${date}01 ; Serial`,\n ` 7200 ; Refresh (2 hours)`,\n ` 3600 ; Retry (1 hour)`,\n ` 1209600 ; Expire (2 weeks)`,\n ` 3600 ; Minimum TTL (1 hour)`,\n `)`,\n ``,\n `; Nameservers`,\n ]\n\n nameservers.forEach((ns) => {\n lines.push(`@ IN NS ${ns}.`)\n })\n\n lines.push('', '; Resource Records')\n\n for (const r of records) {\n const recName = (r.name === '@' ? '@' : r.name).padEnd(12, ' ')\n const ttlValue = r.ttl === 'Auto' ? '3600' : r.ttl.replace('s', '')\n const ttlStr = ttlValue.padEnd(6, ' ')\n const typeStr = r.type.padEnd(7, ' ')\n\n if (r.type === 'MX') {\n const prio = String(r.priority ?? 10).padEnd(4, ' ')\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${prio} ${r.content}.`)\n } else if (r.type === 'TXT') {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} \"${r.content}\"`)\n } else if (r.type === 'CNAME') {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${r.content}.`)\n } else {\n lines.push(`${recName} ${ttlStr} IN ${typeStr} ${r.content}`)\n }\n }\n\n return lines.join('\\n')\n }, [domain, nameservers, records])\n\n const downloadZoneFile = () => {\n const blob = new Blob([zoneFileContent], { type: 'text/plain;charset=utf-8' })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = `${domain}.zone`\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n const resolveHostname = (recordName: string): string => {\n if (recordName === '@') return domain\n return `${recordName}.${domain}`\n }\n\n return (\n
\n {/* Domain Header & Status Card */}\n \n \n
\n
\n
\n
\n \n
\n

{domain}

\n {dnssecEnabled ? (\n \n \n \n Active · DNSSEC Enabled\n \n ) : (\n \n \n \n Active · DNSSEC Inactive\n \n )}\n
\n

\n Authoritative DNS routing and global edge proxy management for {domain}.\n

\n
\n\n {/* Header CTA Buttons */}\n
\n setIsZoneFileOpen((prev) => !prev)}\n >\n \n {isZoneFileOpen ? 'Hide Zone File' : 'Export Zone File'}\n \n \n
\n
\n\n \n\n {/* Nameserver Inspector Bar */}\n
\n
\n Nameservers:\n
\n {nameservers.map((ns) => (\n copyText(ns, ns)}\n >\n {ns}\n {copiedKey === ns ? (\n \n ) : (\n \n )}\n \n ))}\n
\n
\n
\n \n Propagation: 100% Synced\n
\n
\n \n \n\n {/* Zone File Export Card (Collapsible) */}\n {isZoneFileOpen && (\n \n \n
\n
\n BIND RFC 1035 Zone File\n \n Complete DNS zone mapping for {domain} ready for import into Route53, Bind9, or Cloudflare.\n \n
\n setIsZoneFileOpen(false)}\n >\n \n \n
\n \n \n
\n 
\n                {zoneFileContent}\n
\n
\n
\n copyText('zone-file', zoneFileContent)}\n >\n {copiedKey === 'zone-file' ? (\n \n ) : (\n \n )}\n {copiedKey === 'zone-file' ? 'Copied Zone File' : 'Copy Zone Content'}\n \n \n \n Download .zone File\n \n
\n \n \n )}\n\n {/* Add / Edit DNS Record Card */}\n {isAddOpen && (\n \n \n
\n
\n \n {editingId ? 'Edit DNS Record' : 'Add New DNS Record'}\n \n \n {editingId\n ? 'Update configuration, target destination, or edge proxy status.'\n : `Configure host routing, MX exchangers, or verification TXT tags for ${domain}.`}\n \n
\n \n \n \n
\n \n \n
\n {/* Type Select */}\n
\n \n \n
\n\n {/* Name Input */}\n
\n \n setFormName(e.target.value)}\n placeholder=\"@ or subdomain\"\n className=\"font-mono text-xs\"\n />\n
\n\n {/* TTL Select */}\n
\n \n \n
\n
\n\n
\n {/* Content / Target Input */}\n
\n \n setFormContent(e.target.value)}\n placeholder={placeholderMap[formType]}\n className=\"font-mono text-xs\"\n />\n
\n\n {/* Priority Input for MX */}\n {formType === 'MX' && (\n
\n \n setFormPriority(Number(e.target.value))}\n placeholder=\"10\"\n className=\"font-mono text-xs\"\n />\n
\n )}\n
\n\n {/* Optional Comment */}\n
\n \n setFormComment(e.target.value)}\n placeholder=\"e.g. Production ingress or verification tag\"\n className=\"text-xs\"\n />\n
\n\n {/* Proxy Switch (for A, AAAA, CNAME) */}\n {['A', 'AAAA', 'CNAME'].includes(formType) && (\n
\n
\n
\n \n Proxy Status\n
\n

\n {formProxied\n ? 'Proxied: Accelerate traffic and protect origin IP behind Cloudflare edge.'\n : 'DNS only: Direct traffic route without edge proxy caching.'}\n

\n
\n \n
\n )}\n\n {/* Form Actions */}\n
\n \n \n
\n \n \n )}\n\n {/* DNS Records Management Section */}\n
\n {/* Toolbar Filter & Search */}\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search records by name, target, or content...\"\n className=\"h-8.5 pl-8 text-xs\"\n />\n
\n\n {/* Type Filter Buttons */}\n
\n setSelectedTypeFilter('ALL')}\n >\n All ({records.length})\n \n {(['A', 'CNAME', 'MX', 'TXT', 'AAAA', 'CAA'] as DnsRecordType[]).map((t) => (\n setSelectedTypeFilter(t)}\n >\n {t}\n \n ))}\n
\n
\n\n {/* DNS Records Table */}\n
\n
\n \n \n \n Type\n Name\n Target Content\n Proxy Status\n TTL\n \n Actions\n \n \n \n \n {filteredRecords.map((record) => (\n \n {/* Record Type Badge */}\n \n \n {record.type}\n \n \n\n {/* Name & Hostname helper */}\n \n
\n {record.name}\n \n {resolveHostname(record.name)}\n \n
\n \n\n {/* Target Content with Copy button */}\n \n
\n
\n
\n {record.type === 'MX' && (\n \n Pri {record.priority}\n \n )}\n \n {record.content}\n \n
\n {record.comment && (\n

{record.comment}

\n )}\n
\n\n copyText(record.id, record.content)}\n >\n {copiedKey === record.id ? (\n \n ) : (\n \n )}\n \n
\n \n\n {/* Proxy Status Switch / Cloud badge */}\n \n {['A', 'AAAA', 'CNAME'].includes(record.type) ? (\n
\n toggleProxy(record.id)}\n >\n {record.proxied ? (\n \n ) : (\n \n )}\n {record.proxied ? 'Proxied' : 'DNS only'}\n \n
\n ) : (\n
\n \n \n DNS only\n \n
\n )}\n \n\n {/* TTL Badge */}\n \n \n {record.ttl}\n \n \n\n {/* Row Actions Dropdown */}\n \n \n \n \n \n \n startEdit(record)}>\n \n Edit Record\n \n copyText(record.id, record.content)}>\n \n Copy Target\n \n \n copyText(`${record.id}-bind`, `${record.name} IN ${record.type} ${record.content}`)\n }\n >\n \n Copy BIND Row\n \n \n deleteRecord(record.id)}\n >\n \n Delete Record\n \n \n \n \n \n ))}\n\n {/* Empty State */}\n {filteredRecords.length === 0 && (\n \n \n
\n \n

No DNS records found

\n

\n {searchQuery\n ? 'No records match your search filter query.'\n : 'No records configured for this domain yet. Add your first record to begin routing.'}\n

\n \n
\n \n \n )}\n \n
\n
\n
\n\n {/* Table Footer info */}\n
\n

\n Showing {filteredRecords.length} of{' '}\n {records.length} configured records\n

\n
\n \n \n {records.filter((r) => r.proxied).length} Proxied\n \n \n \n {records.filter((r) => !r.proxied).length} DNS Only\n \n
\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/DnsRecordManager.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/switch.json", "https://uipkge.dev/r/react/table.json" ], "description": "Cloudflare/Vercel style DNS records management table and nameserver inspector with type badges, proxy toggle, copyable values, zone file exporter, and add/edit record panel.", "categories": [ "devops", "dashboard", "data" ] }