14 lines
900 B
TypeScript
14 lines
900 B
TypeScript
import { AlertCircleIcon, CheckIcon, ClockIcon } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import type { AutosaveState } from "@/hooks/use-autosave";
|
|
|
|
export function AutosaveStatus({ state }: { state: AutosaveState }) {
|
|
if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" />Saving…</Badge>;
|
|
if (state === "unsaved") return <Badge variant="outline"><ClockIcon data-icon="inline-start" />Waiting to save…</Badge>;
|
|
if (state === "incomplete") return <Badge variant="outline"><AlertCircleIcon data-icon="inline-start" />Complete required fields</Badge>;
|
|
if (state === "error") return <Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" />Autosave failed</Badge>;
|
|
return <Badge variant="secondary"><CheckIcon data-icon="inline-start" />Saved</Badge>;
|
|
}
|