Spaces:
Running
Running
File size: 4,347 Bytes
d157265 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
"use client";
import { useState } from "react";
import { toast } from "sonner";
import { Save, X, ChevronUp, ChevronDown } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import classNames from "classnames";
import { Page } from "@/types";
import { api } from "@/lib/api";
import { Button } from "@/components/ui/button";
import Loading from "@/components/loading";
interface SaveChangesPopupProps {
isOpen: boolean;
onClose: () => void;
onSave: () => Promise<void>;
hasUnsavedChanges: boolean;
pages: Page[];
project?: any;
}
export const SaveChangesPopup = ({
isOpen,
onClose,
onSave,
hasUnsavedChanges,
pages,
project,
}: SaveChangesPopupProps) => {
const [isSaving, setIsSaving] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);
const handleSave = async () => {
if (!project || !hasUnsavedChanges) return;
setIsSaving(true);
try {
await onSave();
toast.success("Changes saved successfully!");
onClose();
} catch (error: any) {
toast.error(error.message || "Failed to save changes");
} finally {
setIsSaving(false);
}
};
if (!hasUnsavedChanges || !isOpen) return null;
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 20 }}
className={classNames(
"absolute bottom-4 right-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out"
)}
>
{isCollapsed ? (
// Collapsed state
<div className="flex items-center gap-2 p-3">
<Save className="size-4 text-neutral-600" />
<span className="text-xs text-neutral-600 font-medium">
Unsaved Changes
</span>
<Button
variant="outline"
size="iconXs"
className="!rounded-md !border-neutral-200"
onClick={() => setIsCollapsed(false)}
>
<ChevronUp className="text-neutral-400 size-3" />
</Button>
</div>
) : (
// Expanded state
<div className="p-4 max-w-sm w-full">
<div className="flex items-start gap-3">
<Save className="size-4 text-neutral-600 translate-y-1.5" />
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<p className="font-semibold text-sm text-neutral-800">
Unsaved Changes
</p>
</div>
<Button
variant="outline"
size="iconXs"
className="!rounded-md !border-neutral-200"
onClick={() => setIsCollapsed(true)}
>
<ChevronDown className="text-neutral-400 size-3" />
</Button>
</div>
<p className="text-xs text-neutral-600 leading-relaxed mb-3">
You have unsaved changes in your project. Save them to
preserve your work.
</p>
<div className="flex items-center gap-2">
<Button
size="xs"
variant="black"
className="!pr-3"
onClick={handleSave}
disabled={isSaving}
>
{isSaving ? (
<Loading overlay={false} />
) : (
<Save className="size-3" />
)}
Save Changes
</Button>
<Button
size="xs"
variant="outline"
className="!text-neutral-600 !border-neutral-200"
disabled={isSaving}
onClick={onClose}
>
Later
</Button>
</div>
</div>
</div>
</div>
)}
</motion.div>
</AnimatePresence>
);
};
|