116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import { Loader2 } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { getAllSourceCodes } from "../adapters/bestiary-index-adapter.js";
|
|
import type { BulkImportState } from "../hooks/use-bulk-import.js";
|
|
import { Button } from "./ui/button.js";
|
|
import { Input } from "./ui/input.js";
|
|
|
|
const DEFAULT_BASE_URL =
|
|
"https://raw.githubusercontent.com/5etools-mirror-3/5etools-src/main/data/bestiary/";
|
|
|
|
interface BulkImportPromptProps {
|
|
importState: BulkImportState;
|
|
onStartImport: (baseUrl: string) => void;
|
|
onDone: () => void;
|
|
}
|
|
|
|
export function BulkImportPrompt({
|
|
importState,
|
|
onStartImport,
|
|
onDone,
|
|
}: BulkImportPromptProps) {
|
|
const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
|
|
const totalSources = getAllSourceCodes().length;
|
|
|
|
if (importState.status === "complete") {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-md border border-green-500/50 bg-green-500/10 px-3 py-2 text-sm text-green-400">
|
|
All sources loaded
|
|
</div>
|
|
<Button size="sm" onClick={onDone}>
|
|
Done
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (importState.status === "partial-failure") {
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-md border border-yellow-500/50 bg-yellow-500/10 px-3 py-2 text-sm text-yellow-400">
|
|
Loaded {importState.completed}/{importState.total} sources (
|
|
{importState.failed} failed)
|
|
</div>
|
|
<Button size="sm" onClick={onDone}>
|
|
Done
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (importState.status === "loading") {
|
|
const processed = importState.completed + importState.failed;
|
|
const pct =
|
|
importState.total > 0
|
|
? Math.round((processed / importState.total) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
Loading sources... {processed}/{importState.total}
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-all"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// idle state
|
|
const isDisabled = !baseUrl.trim() || importState.status !== "idle";
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-foreground">
|
|
Bulk Import Sources
|
|
</h3>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Load stat block data for all {totalSources} sources at once. This will
|
|
download approximately 12.5 MB of data.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label
|
|
htmlFor="bulk-base-url"
|
|
className="text-xs text-muted-foreground"
|
|
>
|
|
Base URL
|
|
</label>
|
|
<Input
|
|
id="bulk-base-url"
|
|
type="url"
|
|
value={baseUrl}
|
|
onChange={(e) => setBaseUrl(e.target.value)}
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
size="sm"
|
|
onClick={() => onStartImport(baseUrl)}
|
|
disabled={isDisabled}
|
|
>
|
|
Load All
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|