gitfor/platform

import { useState } from "react";
import {
  checkSiteCustomDomain,
  deleteSiteVariable,
  deploySite,
  rollbackSiteDeployment,
  setSiteCustomDomain,
  setSiteVariable,
} from "~/fns/sites";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { formatBytes } from "~/lib/format";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { CheckboxField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import type { RepoParams, SiteData } from "./SitesSettings";
import { ExternalLink } from "~/ui/TextLink";

const STATUS_TONES = {
  queued: "neutral",
  building: "warning",
  active: "success",
  failed: "danger",
  superseded: "neutral",
} as const;

export function SiteEnvPanel({ data, params }: { data: SiteData; params: RepoParams }) {
  const save = useAction(setSiteVariable);
  const remove = useAction(deleteSiteVariable);
  if (!data.site) return null;
  return (
    <Panel title="Variables and secrets">
      <ul className="divide-y divide-kumo-hairline">
        {data.env.map((entry) => (
          <li key={entry.name} className="flex items-center gap-3 px-4 py-2 text-sm">
            <code className="font-mono text-kumo-default">{entry.name}</code>
            {entry.secret && <Badge tone="warning">secret</Badge>}