diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index e2698179..08140d72 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -19,6 +19,19 @@ export const DialogContent = React.forwardRef(({ children, ...props }, forwarded
));
+export function DialogHeader({ title, subtitle }: { title: string; subtitle: string }) {
+ return (
+
+ );
+}
+
DialogContent.displayName = "DialogContent";
export const DialogTrigger = DialogPrimitive.Trigger;
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index b1142be3..55294b4d 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -4,34 +4,18 @@ import prisma from "../../lib/prisma";
import Shell from "../../components/Shell";
import { useEffect, useState } from "react";
import { getSession, useSession } from "next-auth/client";
-import {
- CalendarIcon,
- CheckCircleIcon,
- ChevronRightIcon,
- PlusIcon,
- XCircleIcon,
-} from "@heroicons/react/solid";
+import { CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon } from "@heroicons/react/solid";
import { InformationCircleIcon } from "@heroicons/react/outline";
import { Switch } from "@headlessui/react";
-import Loader from '@components/Loader';
+import Loader from "@components/Loader";
import classNames from "@lib/classNames";
+import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogHeader } from "@components/Dialog";
export default function IntegrationHome({ integrations }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
-
- const [showAddModal, setShowAddModal] = useState(false);
- const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false);
const [selectableCalendars, setSelectableCalendars] = useState([]);
- function toggleAddModal() {
- setShowAddModal(!showAddModal);
- }
-
- function toggleShowCalendarModal() {
- setShowSelectCalendarModal(!showSelectCalendarModal);
- }
-
function loadCalendars() {
fetch("api/availability/calendar")
.then((response) => response.json())
@@ -89,6 +73,104 @@ export default function IntegrationHome({ integrations }) {
return ;
}
+ const ConnectNewAppDialog = () => (
+
+
+
+ Connect a new App
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ );
+
+ const SelectCalendarDialog = () => (
+
+
+ Select calendars
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ );
+
return (
@@ -96,18 +178,7 @@ export default function IntegrationHome({ integrations }) {
-
-
- Connect a new App
-
- }>
+ }>
{integrations.filter((ig) => ig.credential).length !== 0 ? (
@@ -174,217 +245,21 @@ export default function IntegrationHome({ integrations }) {
You currently do not have any apps connected. Connect your first app to get started.
-
-
- {" "}
- Connect your first app →
-
-
+
)}
- {showAddModal && (
-
-
- {/* */}
-
-
-
-
- {/* */}
-
-
-
-
-
- Connect a new App
-
-
-
Connect a new app to your account.
-
-
-
-
-
-
- Close
-
-
-
-
-
- )}
Select calendars
Select which calendars are checked for availability to prevent double bookings.
-
-
- Select calendars
-
-
+
- {showSelectCalendarModal && (
-
-
- {/* */}
-
-
-
-
- {/* */}
-
-
-
-
-
-
-
- Select calendars
-
-
-
- If no entry is selected, all calendars will be checked
-
-
-
-
-
-
-
- Close
-
-
-
-
-
- )}
-