45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { createPortal } from "react-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { CircleCheckBig, X } from "lucide-react";
|
|
import { useApiServices } from "@/store/admin/apiServices";
|
|
|
|
const ApiServiceUpdatedModal = () => {
|
|
const resetUpdated = useApiServices((state) => state.resetUpdated);
|
|
|
|
const portalRoot = document.getElementById("portal-root");
|
|
if (!portalRoot) return null;
|
|
|
|
return createPortal(
|
|
<div className="fixed z-50 inset-0 flex items-center justify-center bg-black/30 dark:bg-white/30 px-5">
|
|
<div className="rounded-2xl flex flex-col items-stretch bg-white dark:bg-black min-w-[300px] max-w-md w-full">
|
|
<div className="flex flex-row items-center justify-between p-4 border-b dark:border-gray-800 border-gray-300">
|
|
<p className="text-gray-800 dark:text-gray-200">Service Updated</p>
|
|
<Button variant="icon" onClick={resetUpdated}>
|
|
<X />
|
|
</Button>
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="mb-4 flex flex-col items-center p-4 text-green-400 gap-3">
|
|
<CircleCheckBig size={64} />
|
|
<h2 className="text-gray-800 dark:text-gray-200 text-xl">
|
|
Service has updated successfully!
|
|
</h2>
|
|
</div>
|
|
<div className="mt-4 w-full">
|
|
<Button
|
|
variant="outlined"
|
|
className="w-full"
|
|
onClick={resetUpdated}
|
|
>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
portalRoot,
|
|
);
|
|
};
|
|
|
|
export default ApiServiceUpdatedModal;
|