feature(web): Allow adding multiple URLs at once #158 (#167)

Added a reusable dialog
opening a dialog that allows you to decide if you want to import multiple URLs at once if you provide only that

Co-authored-by: kamtschatka <simon.schatka@gmx.at>

1 files changed, 55 insertions, 0 deletions

diff --git a/apps/web/components/ui/multiple-choice-dialog.tsx b/apps/web/components/ui/multiple-choice-dialog.tsx
new file mode 100644
index 00000000..b6f2a5c3
--- /dev/null
+++ b/apps/web/components/ui/multiple-choice-dialog.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export default function MultipleChoiceDialog({
+  open: userIsOpen,
+  setOpen: userSetOpen,
+  onOpenChange,
+  title,
+  description,
+  actionButtons,
+  children,
+}: {
+  open?: boolean;
+  setOpen?: (v: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  actionButtons: ((
+    setDialogOpen: (open: boolean) => void,
+  ) => React.ReactNode)[];
+  children?: React.ReactNode;
+}) {
+  const [customIsOpen, setCustomIsOpen] = useState(false);
+  const [isDialogOpen, setDialogOpen] = [
+    userIsOpen ?? customIsOpen,
+    userSetOpen ?? setCustomIsOpen,
+  ];
+  return (
+    <Dialog
+      open={isDialogOpen}
+      onOpenChange={(isOpen) => {
+        onOpenChange?.(isOpen);
+        setDialogOpen(isOpen);
+      }}
+    >
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {description}
+        <DialogFooter className="sm:justify-end">
+          {actionButtons.map((actionButton) => actionButton(setDialogOpen))}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}