70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { useNavigate } from "@remix-run/react";
|
||
import { CheckCircle2, ArrowLeft } from "lucide-react";
|
||
import { Dialog, DialogContent, DialogOverlay } from "~/components/ui/dialog";
|
||
import { Button } from "~/components/ui/button";
|
||
import { UserCollection } from "src/api/types";
|
||
|
||
interface SetSuccessModalProps {
|
||
isOpen: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
collection: UserCollection | null;
|
||
}
|
||
|
||
export const SetSuccessModal = ({
|
||
isOpen,
|
||
onOpenChange,
|
||
collection,
|
||
}: SetSuccessModalProps) => {
|
||
const navigate = useNavigate();
|
||
|
||
const handleViewSet = () => {
|
||
if (collection?.id) {
|
||
navigate(`/profile/sets/${collection.id}`);
|
||
onOpenChange(false);
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
onOpenChange(false);
|
||
};
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||
<DialogOverlay />
|
||
<DialogContent className="p-4 bg-WHITE rounded-[15px] w-[calc(100%-40px)]">
|
||
<div className="flex flex-col gap-6">
|
||
<div className="flex flex-col gap-3 items-center w-full">
|
||
<div className="w-16 h-16 rounded-full bg-GREEN/10 flex items-center justify-center">
|
||
<CheckCircle2 size={32} className="text-GREEN" />
|
||
</div>
|
||
<p className="text-B14 font-bold mt-1">ست با موفقیت ایجاد شد!</p>
|
||
<p className="text-R12 text-GRAY text-center">
|
||
ست "{collection?.title}" ایجاد شد و محصول به آن اضافه شد.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-row gap-4 w-full">
|
||
<Button
|
||
className="w-[100%]"
|
||
size="sm"
|
||
variant="dark"
|
||
onClick={handleClose}
|
||
>
|
||
بستن
|
||
</Button>
|
||
<Button
|
||
className="w-[100%] gap-2"
|
||
variant="primary"
|
||
size="sm"
|
||
onClick={handleViewSet}
|
||
>
|
||
مشاهده ست
|
||
<ArrowLeft size={16} />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|