58 lines
1.5 KiB
Svelte
58 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { Check, LoaderCircle } from "@lucide/svelte";
|
|
|
|
interface Props {
|
|
commitMessage: string;
|
|
canCommit: boolean;
|
|
hasRepository: boolean;
|
|
isBusy: boolean;
|
|
operation: string;
|
|
stagedCount: number;
|
|
onCommit: () => void;
|
|
onCommitMessageChange: (msg: string) => void;
|
|
}
|
|
|
|
let {
|
|
commitMessage = "",
|
|
canCommit = false,
|
|
hasRepository = false,
|
|
isBusy = false,
|
|
operation = "",
|
|
stagedCount = 0,
|
|
onCommit = () => {},
|
|
onCommitMessageChange = () => {},
|
|
}: Props = $props();
|
|
|
|
function handleSubmit(event: SubmitEvent) {
|
|
event.preventDefault();
|
|
onCommit();
|
|
}
|
|
</script>
|
|
|
|
<section class="panel flex flex-col" aria-label="Commit">
|
|
<div class="section-head">
|
|
<div>
|
|
<span class="eyebrow">Commit</span>
|
|
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Message</h2>
|
|
</div>
|
|
<span class="pill pill-count">{stagedCount} staged</span>
|
|
</div>
|
|
|
|
<form class="commit-form" onsubmit={handleSubmit}>
|
|
<textarea
|
|
value={commitMessage}
|
|
oninput={(e) => onCommitMessageChange((e.target as HTMLTextAreaElement).value)}
|
|
placeholder="Commit message..."
|
|
disabled={!hasRepository || isBusy}
|
|
></textarea>
|
|
<button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit}>
|
|
{#if operation === "Committing"}
|
|
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
|
{:else}
|
|
<Check size={16} aria-hidden="true" />
|
|
{/if}
|
|
Commit
|
|
</button>
|
|
</form>
|
|
</section>
|