You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.3 KiB
55 lines
1.3 KiB
import { Button } from '@/components/ui/button' |
|
import { RefreshCw } from 'lucide-react' |
|
import { cn } from '@/lib/utils' |
|
|
|
interface RetroRefreshButtonProps { |
|
onClick: () => void |
|
isLoading?: boolean |
|
className?: string |
|
size?: 'sm' | 'md' | 'lg' |
|
} |
|
|
|
export default function RetroRefreshButton({ |
|
onClick, |
|
isLoading = false, |
|
className, |
|
size = 'md' |
|
}: RetroRefreshButtonProps) { |
|
const sizeClasses = { |
|
sm: 'h-8 w-8 p-1', |
|
md: 'h-10 w-10 p-2', |
|
lg: 'h-12 w-12 p-3' |
|
} |
|
|
|
const iconSizes = { |
|
sm: 'h-4 w-4', |
|
md: 'h-5 w-5', |
|
lg: 'h-6 w-6' |
|
} |
|
|
|
return ( |
|
<Button |
|
onClick={onClick} |
|
disabled={isLoading} |
|
className={cn( |
|
'bg-background text-foreground border-2 border-green-500 hover:bg-muted hover:border-green-400', |
|
'dark:bg-background dark:text-foreground dark:border-green-500 dark:hover:bg-muted dark:hover:border-green-400', |
|
'transition-all duration-200 ease-in-out', |
|
'shadow-lg hover:shadow-xl', |
|
'rounded-lg', |
|
'disabled:opacity-50 disabled:cursor-not-allowed', |
|
sizeClasses[size], |
|
className |
|
)} |
|
variant="outline" |
|
> |
|
<RefreshCw |
|
className={cn( |
|
'text-green-500 transition-transform duration-200', |
|
isLoading && 'animate-spin', |
|
iconSizes[size] |
|
)} |
|
/> |
|
</Button> |
|
) |
|
}
|
|
|