gui.do
Barazo default frontend
barazo.forum
1/**
2 * SaveButton - Button with state-driven text/icon for save operations.
3 * Cycles through idle, saving (disabled), and saved (with CheckCircle icon).
4 */
5
6import { CheckCircle } from '@phosphor-icons/react'
7import { cn } from '@/lib/utils'
8import type { SaveStatus } from '@/hooks/use-save-state'
9
10interface SaveButtonProps {
11 status: SaveStatus
12 onClick: () => void
13 label?: string
14 savingLabel?: string
15 savedLabel?: string
16 className?: string
17}
18
19export function SaveButton({
20 status,
21 onClick,
22 label = 'Save',
23 savingLabel = 'Saving...',
24 savedLabel = 'Saved',
25 className,
26}: SaveButtonProps) {
27 return (
28 <>
29 <button
30 type="button"
31 onClick={onClick}
32 disabled={status === 'saving'}
33 className={cn(
34 'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50',
35 className
36 )}
37 >
38 {status === 'idle' && label}
39 {status === 'saving' && savingLabel}
40 {status === 'saved' && (
41 <span className="flex items-center gap-1.5">
42 <CheckCircle size={16} aria-hidden="true" />
43 {savedLabel}
44 </span>
45 )}
46 </button>
47 <span role="status" aria-live="polite" className="sr-only">
48 {status === 'saved' ? `${savedLabel}.` : ''}
49 </span>
50 </>
51 )
52}