import { useState } from "react";
import {
checkSiteCustomDomain,
deleteSiteVariable,
deploySite,
rollbackSiteDeployment,
setSiteCustomDomain,
setSiteVariable,
} from "~/fns/sites";
import { useAction } from "~/hooks/use-action";
import { Badge, EmptyState, formatBytes, Panel, RelativeTime } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { CheckboxField, ErrorBanner, TextField } from "~/components/ui/Field";
import type { RepoParams, SiteData } from "./SitesSettings";
const STATUS_TONES = {
queued: "neutral",
building: "amber",
active: "green",
failed: "red",
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-gray-800">
{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-gray-200">{entry.name}</code>
{entry.secret && <Badge tone="amber">secret</Badge>}
<span className="ml-auto text-xs text-gray-500">
<RelativeTime timestamp={entry.updatedAt} />
</span>
<Button size="sm" variant="danger" onClick={() => remove.run({ data: { ...params, name: entry.name } })}>
Delete
</Button>