58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { GitBranch } from '@phosphor-icons/react'
|
|
|
|
interface GitRequiredModalProps {
|
|
onCreateRepo: () => Promise<void>
|
|
onChooseVault: () => void
|
|
}
|
|
|
|
export function GitRequiredModal({ onCreateRepo, onChooseVault }: GitRequiredModalProps) {
|
|
const [creating, setCreating] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleCreate = async () => {
|
|
setCreating(true)
|
|
setError(null)
|
|
try {
|
|
await onCreateRepo()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err))
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center" style={{ background: 'var(--sidebar)' }}>
|
|
<div className="flex max-w-sm flex-col items-center gap-5 rounded-xl border border-border bg-background p-8 shadow-lg">
|
|
<GitBranch size={36} className="text-muted-foreground" />
|
|
<h2 className="m-0 text-lg font-semibold text-foreground">Git repository required</h2>
|
|
<p className="m-0 text-center text-[13px] leading-relaxed text-muted-foreground">
|
|
Tolaria uses a git repository to track changes, detect moved files, and keep your vault safe.
|
|
We'll create a local repo — no remote needed.
|
|
</p>
|
|
{error && (
|
|
<p className="m-0 rounded-md bg-destructive/10 px-3 py-2 text-center text-[12px] text-destructive">
|
|
{error}
|
|
</p>
|
|
)}
|
|
<div className="flex w-full flex-col gap-2">
|
|
<button
|
|
className="w-full cursor-pointer rounded-md bg-primary px-4 py-2 text-[13px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
|
|
onClick={handleCreate}
|
|
disabled={creating}
|
|
>
|
|
{creating ? 'Creating…' : 'Create repository'}
|
|
</button>
|
|
<button
|
|
className="w-full cursor-pointer rounded-md border border-border bg-transparent px-4 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
|
|
onClick={onChooseVault}
|
|
disabled={creating}
|
|
>
|
|
Choose another vault
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|