Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 5x 4x | import { Loader2, Check, AlertCircle } from "lucide-react";
interface SaveStatusIndicatorProps {
status: "idle" | "saving" | "saved" | "error";
lastSavedAt: Date | null;
}
export function SaveStatusIndicator({
status,
lastSavedAt,
}: SaveStatusIndicatorProps) {
if (status === "idle" && !lastSavedAt) return null;
return (
<div className="flex items-center gap-1.5 text-sm">
{status === "saving" && (
<>
<Loader2 className="h-3.5 w-3.5 animate-spin text-foreground-muted" />
<span className="text-foreground-muted">Saving...</span>
</>
)}
{status === "saved" && (
<>
<Check className="h-3.5 w-3.5 text-success" />
<span className="text-success">Saved</span>
</>
)}
{status === "error" && (
<>
<AlertCircle className="h-3.5 w-3.5 text-error" />
<span className="text-error">Save failed</span>
</>
)}
{status === "idle" && lastSavedAt && (
<span className="text-foreground-subtle">Unsaved changes</span>
)}
</div>
);
}
|