Provider row

The line that heads a records card: the provider mark, the account the records go to, the one action, and disconnecting behind the row's own menu.

provider-row is the connection, as one line rather than a panel of its own. It states who serves the zone, names the account the records go to, and carries the single thing to do about it.

import { Domain } from "@domainkit/react";

import { ProviderRow } from "@/components/domainkit/provider-row";

import {
  PreviewRoot,
  previewDomain,
  previewMarks,
  previewRequirements,
} from "../../lib/preview-flow.tsx";

function Row({ readOnly }: { readonly readOnly?: boolean }) {
  const flow = Domain.useFlow({
    domain: previewDomain,
    requirements: previewRequirements,
    ...(readOnly === undefined ? {} : { readOnly }),
  });
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-card">
      <ProviderRow flow={flow} marks={previewMarks} />
    </div>
  );
}

export default function ProviderRowExample() {
  return (
    <PreviewRoot>
      <div className="grid gap-3">
        <Row />
        <Row readOnly />
      </div>
    </PreviewRoot>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/provider-row.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/provider-row.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/provider-row.json

bunx shadcn@latest add https://domain-kit.dev/r/provider-row.json

What it says

State	The line	The action
Discovery named a host	`{Provider} DNS detected`	Connect
Connected	`{Provider} · {account}`	Add N records
Connected with an apply	`{Provider} · {account}`	`N added`
Read-only with a host	`An administrator can connect {Provider}`	None

Disconnecting is behind the row’s menu, because it is the rare action and the common one must not sit beside it.

API

Prop	Type	Required	Description
`flow`	`Domain.Flow`	yes	The flow the row reports on.
`marks`	`ProviderArtwork`	no	Your artwork per provider id.
`action`	`ReactNode`	no	Replaces the one action on the right.

marks comes from provider artwork, which the row, the connect dialog, and the domain field all draw through, so a host supplies its logos once.