51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { Button } from "@code/ui/components/button";
|
|
import { FolderGit2, LoaderCircle } from "lucide-react";
|
|
|
|
import type { WorkspaceState } from "@/lib/workspace/types";
|
|
|
|
export const ProjectConnectForm = ({
|
|
workspace,
|
|
}: {
|
|
readonly workspace: WorkspaceState;
|
|
}) => (
|
|
<main className="grid min-h-svh place-items-center bg-[#f2f0e7] px-5 text-[#20201d]">
|
|
<form
|
|
className="w-full max-w-sm"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
void workspace.connectRepository();
|
|
}}
|
|
>
|
|
<span className="grid size-11 place-items-center bg-[#20201d] text-white">
|
|
<FolderGit2 className="size-5" />
|
|
</span>
|
|
<h1 className="mt-6 text-2xl font-semibold">Connect a project</h1>
|
|
<p className="mt-2 text-sm leading-6 text-[#68665e]">
|
|
Turn actionable project conversation into proposed Work with exact
|
|
provenance.
|
|
</p>
|
|
<input
|
|
aria-label="Public Git repository URL"
|
|
className="mt-6 h-12 w-full border border-[#c9c5b9] bg-[#fffefa] px-3 text-sm outline-none focus:border-[#55564e]"
|
|
onChange={(event) => workspace.setRepository(event.target.value)}
|
|
placeholder="https://github.com/owner/repository"
|
|
required
|
|
value={workspace.repository}
|
|
/>
|
|
{workspace.error ? (
|
|
<p className="mt-2 text-xs text-red-700">{workspace.error.message}</p>
|
|
) : null}
|
|
<Button
|
|
className="mt-3 h-12 w-full"
|
|
disabled={workspace.pending}
|
|
type="submit"
|
|
>
|
|
{workspace.pending ? (
|
|
<LoaderCircle className="size-4 animate-spin" />
|
|
) : null}
|
|
{workspace.pending ? "Connecting" : "Connect project"}
|
|
</Button>
|
|
</form>
|
|
</main>
|
|
);
|