File size: 3,548 Bytes
dadd5bd |
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 |
import { X } from 'lucide-react';
interface LayoutSwitchConfirmationProps {
onKeep: () => void;
onReplace: () => void;
onCancel: () => void;
}
export default function LayoutSwitchConfirmation({
onKeep,
onReplace,
onCancel
}: LayoutSwitchConfirmationProps) {
return (
<div
className="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm"
onClick={onCancel}
>
{/* Modal Container */}
<div
className="bg-[#2b2d31] rounded-[12px] shadow-2xl max-w-[480px] w-full mx-4 overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-[#3e4044]">
<h2 className="text-white text-[18px] font-semibold">
Switch Layout
</h2>
<button
onClick={onCancel}
className="text-gray-400 hover:text-white transition-colors p-1 hover:bg-[#3e4044] rounded"
>
<X size={20} />
</button>
</div>
{/* Content */}
<div className="px-6 py-5">
<p className="text-gray-300 text-[15px] leading-relaxed mb-4">
You have custom objects on the canvas. What would you like to do?
</p>
{/* Options */}
<div className="space-y-3">
{/* Keep Option */}
<div className="bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]">
<div className="flex items-start gap-3">
<div className="w-5 h-5 rounded-full border-2 border-[#5865f2] flex-shrink-0 mt-0.5" />
<div>
<p className="text-white font-medium text-[14px] mb-1">
Keep my objects
</p>
<p className="text-gray-400 text-[13px]">
Add the new layout objects alongside your existing work
</p>
</div>
</div>
</div>
{/* Replace Option */}
<div className="bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]">
<div className="flex items-start gap-3">
<div className="w-5 h-5 rounded-full border-2 border-[#ed4245] flex-shrink-0 mt-0.5" />
<div>
<p className="text-white font-medium text-[14px] mb-1">
Replace everything
</p>
<p className="text-gray-400 text-[13px]">
Remove all objects and load a fresh layout
</p>
</div>
</div>
</div>
</div>
</div>
{/* Actions */}
<div className="px-6 py-4 bg-[#1e1f22] flex items-center justify-end gap-3">
<button
onClick={onCancel}
className="px-4 py-2 rounded-[6px] text-white text-[14px] font-medium hover:bg-[#3e4044] transition-colors"
>
Cancel
</button>
<button
onClick={onReplace}
className="px-4 py-2 rounded-[6px] bg-[#ed4245] text-white text-[14px] font-medium hover:bg-[#d13438] transition-colors"
>
Replace
</button>
<button
onClick={onKeep}
className="px-4 py-2 rounded-[6px] bg-[#5865f2] text-white text-[14px] font-medium hover:bg-[#4752c4] transition-colors"
>
Keep
</button>
</div>
</div>
</div>
);
}
|