66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
} from "@/components/ui/dropdown-menu";
|
||
|
|
import { Loader2, RefreshCw, ChevronDown } from "lucide-react";
|
||
|
|
|
||
|
|
interface RequestUpdateMenuProps {
|
||
|
|
onUpdateDevice: () => void;
|
||
|
|
onUpdateRoom: () => void;
|
||
|
|
onUpdateAll: () => void;
|
||
|
|
loading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RequestUpdateMenu({
|
||
|
|
onUpdateDevice,
|
||
|
|
onUpdateRoom,
|
||
|
|
onUpdateAll,
|
||
|
|
loading,
|
||
|
|
}: RequestUpdateMenuProps) {
|
||
|
|
return (
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
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..." : "Cập nhật"}
|
||
|
|
</span>
|
||
|
|
<ChevronDown className="h-4 w-4 text-gray-600 transition-transform duration-200 group-data-[state=open]:rotate-180" />
|
||
|
|
</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>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="start" className="w-56">
|
||
|
|
<DropdownMenuItem onClick={onUpdateDevice} disabled={loading}>
|
||
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||
|
|
<span>Cập nhật thiết bị cụ thể</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
<DropdownMenuItem onClick={onUpdateRoom} disabled={loading}>
|
||
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||
|
|
<span>Cập nhật theo phòng</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
<DropdownMenuItem onClick={onUpdateAll} disabled={loading}>
|
||
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||
|
|
<span>Cập nhật tất cả thiết bị</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
);
|
||
|
|
}
|