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 41 42 43 44 45 46 47 48 49 50 51 | 1x 504x | import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
export type SaveStatus = 'idle' | 'saving' | 'resaving' | 'saved' | 'error'
const labels: Record<SaveStatus, string> = {
idle: '',
saving: 'Saving…',
resaving: 'Saved, saving latest changes…',
saved: 'Saved',
error: 'Could not save',
}
export function SaveIndicator({
status,
className = '',
}: {
status: SaveStatus
className?: string
}) {
return (
<span
className={`pointer-events-none flex h-5 w-5 items-center justify-center ${className}`}
role="status"
aria-label={labels[status]}
data-status={status}
>
{(status === 'saving' || status === 'resaving') && (
<span
data-testid="save-spinner"
className="absolute h-5 w-5 animate-spin rounded-full border-2 border-gray-300 dark:border-neutral-600 border-t-orange-500"
/>
)}
{status === 'resaving' && (
<CheckIcon className="relative h-3 w-3 text-green-600 dark:text-green-400 stroke-[3]" />
)}
{status === 'saved' && (
<CheckIcon
data-testid="save-check"
className="h-5 w-5 text-green-600 dark:text-green-400 stroke-[3] animate-fade-out"
/>
)}
{status === 'error' && (
<ExclamationTriangleIcon
data-testid="save-error"
className="h-5 w-5 text-amber-500 dark:text-amber-400 stroke-[2.5] animate-fade-in"
/>
)}
</span>
)
}
|