One-click DNS Setup

1"use client";
2 
3import * as React from "react";
4import type { Domain } from "@opencoredev/domain-sdk";
5import {
6  Alert02Icon,
7  ArrowUpRight01Icon,
8  CheckmarkCircle02Icon,
9  Loading03Icon,
10  SecurityCheckIcon,
11} from "@hugeicons/core-free-icons";
12import { HugeiconsIcon } from "@hugeicons/react";
13 
14import { Button } from "@/components/ui/button";
15import { Separator } from "@/components/ui/separator";
16 
17export interface OneClickDnsSetupProps {
18  domain: Domain;
19  dnsProvider: string;
20  onConnect(domain: Domain): void | Promise<void>;
21  onManualSetup?(domain: Domain): void;
22  isConnecting?: boolean;
23  isConnected?: boolean;
24  error?: string;
25}
26 
27export function OneClickDnsSetup({
28  domain,
29  dnsProvider,
30  onConnect,
31  onManualSetup,
32  isConnecting = false,
33  isConnected = false,
34  error,
35}: OneClickDnsSetupProps) {
36  const headingId = React.useId();
37  const requiredRecords = domain.records.filter((record) => record.required).length;
38  const description = isConnected
39    ? `${dnsProvider} accepted the DNS changes for ${domain.hostname}. Propagation may still take a few minutes.`
40    : `Authorize ${dnsProvider} to add ${requiredRecords} required DNS ${requiredRecords === 1 ? "record" : "records"} for ${domain.hostname}.`;
41 
42  return (
43    <section
44      aria-labelledby={headingId}
45      aria-busy={isConnecting}
46      className="min-w-0 overflow-hidden rounded-lg border bg-background text-foreground"
47    >
48      <div className="flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
49        <div className="flex min-w-0 gap-3">
50          <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/30">
51            {isConnected ? (
52              <HugeiconsIcon icon={CheckmarkCircle02Icon} className="size-4" aria-hidden="true" />
53            ) : error ? (
54              <HugeiconsIcon
55                icon={Alert02Icon}
56                className="size-4 text-destructive"
57                aria-hidden="true"
58              />
59            ) : (
60              <HugeiconsIcon icon={SecurityCheckIcon} className="size-4" aria-hidden="true" />
61            )}
62          </span>
63          <div className="flex min-w-0 flex-col gap-1">
64            <h2 id={headingId} className="text-sm font-semibold">
65              {isConnected ? "DNS changes approved" : "Set up DNS automatically"}
66            </h2>
67            <p className="max-w-2xl break-words text-sm text-muted-foreground">{description}</p>
68            {error ? (
69// … truncated