import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { transferRepo } from "~/fns/profile";
import { transferableOwners } from "~/fns/repos";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
export function TransferRepoPanel({ owner, repo }: { owner: string; repo: string }) {
const navigate = useNavigate();
const transfer = useAction(transferRepo, { invalidate: false });
const [targets, setTargets] = useState<string[] | null>(null);
return (
<Panel tone="danger" title="Transfer ownership">
<div className="space-y-3 p-5 text-sm">
<ErrorBanner message={transfer.error} />
<p className="text-kumo-subtle">
Move this repository to another account you can create repositories in. Old URLs and git remotes redirect.
</p>
{targets === null ? (
<Button onClick={async () => setTargets((await transferableOwners()).filter((name) => name !== owner))}>
Choose new owner
</Button>
) : targets.length === 0 ? (
<p className="text-kumo-subtle">There are no other accounts you can transfer to.</p>
) : (
<form
className="space-y-3"
onSubmit={async (event) => {
event.preventDefault();
const form = new FormData(event.currentTarget);
const result = await transfer.run({
data: {
owner,
repo,
newOwner: String(form.get("newOwner") ?? ""),
confirm: String(form.get("confirm") ?? ""),