1 files changed, 41 insertions, 0 deletions
diff --git a/apps/web/src/services/storage/components/storage-persistence-dialog.tsx b/apps/web/src/services/storage/components/storage-persistence-dialog.tsx
new file mode 100644
index 00000000..4544ef1d
--- /dev/null
+++ b/apps/web/src/services/storage/components/storage-persistence-dialog.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useStoragePersistence } from "@/services/storage/use-storage-persistence";
+
+export function StoragePersistenceDialog() {
+	const { showDialog, onConfirm, onDismiss } = useStoragePersistence();
+
+	return (
+		<Dialog open={showDialog} onOpenChange={(open) => !open && onDismiss()}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Don't lose your projects</DialogTitle>
+				</DialogHeader>
+				<DialogBody>
+					<p className="text-base text-muted-foreground">
+						Your browser can automatically delete your projects when storage
+						runs low.
+					</p>
+					<p className="text-base text-muted-foreground">
+						Allow OpenCut to protect them?
+					</p>
+				</DialogBody>
+				<DialogFooter>
+					<Button variant="outline" onClick={onDismiss}>
+						Not now
+					</Button>
+					<Button onClick={onConfirm}>Allow</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}