first commit

common/resources/client/custom-domains/datatable/connect-domain-dialog/info-step.tsx

@@ -0,0 +1,58 @@
+import {useSettings} from '@common/core/settings/use-settings';
+import {Trans} from '@common/i18n/trans';
+import {ReactNode} from 'react';
+import {ConnectDomainStepProps} from '@common/custom-domains/datatable/connect-domain-dialog/connect-domain-step';
+import {isSubdomain} from '@common/custom-domains/datatable/connect-domain-dialog/is-subdomain';
+import {DomainProgressIndicator} from '@common/custom-domains/datatable/connect-domain-dialog/domain-progress-indicator';
+
+export function InfoStep({
+  stepper: {
+    state: {isLoading, host, serverIp},
+  },
+}: ConnectDomainStepProps) {
+  const {base_url} = useSettings();
+
+  if (isLoading) {
+    return <DomainProgressIndicator />;
+  }
+
+  if (isSubdomain(host)) {
+    return (
+      <Message
+        title={
+          <Trans message="Add this CNAME record to your domain by visiting your DNS provider or registrar." />
+        }
+        record="CNAME"
+        target={base_url}
+      />
+    );
+  }
+
+  return (
+    <Message
+      title={
+        <Trans message="Add this A record to your domain by visiting your DNS provider or registrar." />
+      }
+      record="A"
+      target={serverIp}
+    />
+  );
+}
+
+interface MessageProps {
+  title: ReactNode;
+  record: string;
+  target: string;
+}
+
+function Message({title, record, target}: MessageProps) {
+  return (
+    <div>
+      <div className="text-muted mb-10">{title}</div>
+      <div className="flex items-center gap-12 text-base p-12 rounded bg-primary/10 text-primary font-semibold">
+        <div>{record}</div>
+        {target}
+      </div>
+    </div>
+  );
+}