35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Loader2, RefreshCw } from "lucide-react"
|
|
|
|
interface UpdateButtonProps {
|
|
onClick: () => void
|
|
loading?: boolean
|
|
label?: string
|
|
}
|
|
|
|
export function UpdateButton({ onClick, loading, label }: UpdateButtonProps) {
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
onClick={onClick}
|
|
disabled={loading}
|
|
className="group relative overflow-hidden border-2 border-gray-300 bg-white text-gray-800 font-medium px-6 py-2.5 rounded-lg transition-all duration-300 hover:border-gray-400 hover:bg-gray-50 hover:shadow-lg hover:shadow-gray-200/50 hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{loading ? (
|
|
<Loader2 className="h-4 w-4 animate-spin text-gray-600" />
|
|
) : (
|
|
<RefreshCw className="h-4 w-4 text-gray-600 transition-transform duration-300 group-hover:rotate-180" />
|
|
)}
|
|
<span className="text-sm font-semibold">
|
|
{loading ? "Đang gửi..." : (label ?? "Yêu cầu thiết bị cập nhật")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-gray-100/30 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
|
|
</Button>
|
|
)
|
|
}
|