gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { getSite } from "~/fns/sites";
import { Panel } from "~/ui/Panel";
import { SiteAccessForm, SiteSourceForm } from "~/components/SitesSettings";
import { SiteDeploymentsPanel, SiteDomainPanel, SiteEnvPanel } from "~/components/SitesPanels";
import { Callout } from "~/ui/Callout";
import { ExternalLink } from "~/ui/TextLink";

export const Route = createFileRoute("/$owner/$repo/settings/sites")({
  loader: ({ params }) => getSite({ data: { owner: params.owner, repo: params.repo } }),
  component: SitesSettingsPage,
});

function SitesSettingsPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  if (!data.enabled) {
    return (
      <Panel title="Sites">
        <p className="p-4 text-sm text-kumo-subtle">
          Sites are not configured on this forge. Set <code className="font-mono">SITES_DOMAIN</code> to a registrable
          domain separate from the forge to enable them.
        </p>
      </Panel>
    );
  }
  return (
    <>
      {data.site?.activeDeploymentId && data.url && (
        <Callout tone="success" className="px-4 py-3">
          Your site is live at{" "}
          <ExternalLink href={data.url} target="_blank" rel="noreferrer" tone="success" mono>
            {data.site.customDomain && data.site.domainStatus === "active"
              ? `https://${data.site.customDomain}/`
              : data.url}
          </ExternalLink>
        </Callout>
      )}
      <SiteSourceForm data={data} params={params} />
      <SiteAccessForm data={data} params={params} />