diff --git a/components/Shell.tsx b/components/Shell.tsx
index 4b8e614c..a8d6b3f1 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -17,6 +17,7 @@ import {
} from "@heroicons/react/solid";
import Logo from "./Logo";
import classNames from "@lib/classNames";
+import { Toaster } from "react-hot-toast";
export default function Shell(props) {
const router = useRouter();
@@ -69,6 +70,10 @@ export default function Shell(props) {
return session ? (
<>
+
{/* Static sidebar for desktop */}
diff --git a/lib/notification.ts b/lib/notification.ts
new file mode 100644
index 00000000..c97546a5
--- /dev/null
+++ b/lib/notification.ts
@@ -0,0 +1,49 @@
+import toast from "react-hot-toast";
+
+export default function showToast(message: string, variant: "success" | "warning" | "error") {
+ switch (variant) {
+ case "success":
+ toast.success(message, {
+ duration: 6000,
+ style: {
+ borderRadius: "2px",
+ background: "#333",
+ color: "#fff",
+ boxShadow: "none",
+ },
+ });
+ break;
+ case "error":
+ toast.error(message, {
+ duration: 6000,
+ style: {
+ borderRadius: "2px",
+ background: "#FEE2E2",
+ color: "#B91C1C",
+ boxShadow: "none",
+ },
+ });
+ break;
+ case "warning":
+ toast(message, {
+ duration: 6000,
+ style: {
+ borderRadius: "2px",
+ background: "#FFEDD5",
+ color: "#C2410C",
+ boxShadow: "none",
+ },
+ });
+ break;
+ default:
+ toast.success(message, {
+ duration: 6000,
+ style: {
+ borderRadius: "2px",
+ background: "#333",
+ color: "#fff",
+ boxShadow: "none",
+ },
+ });
+ }
+}
diff --git a/package.json b/package.json
index 6138446a..ae9122f1 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
"react-dates": "^21.8.0",
"react-dom": "17.0.2",
"react-easy-crop": "^3.5.2",
+ "react-hot-toast": "^2.1.0",
"react-multi-email": "^0.5.3",
"react-phone-number-input": "^3.1.25",
"react-select": "^4.3.1",
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index bc17c0bd..b7b1f7f5 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -37,6 +37,7 @@ import { DateRangePicker, OrientationShape, toMomentObject } from "react-dates";
import Switch from "@components/ui/Switch";
import { Dialog, DialogTrigger } from "@components/Dialog";
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
+import showToast from "@lib/notification";
dayjs.extend(utc);
dayjs.extend(timezone);
@@ -237,6 +238,9 @@ export default function EventTypePage({
},
});
+
+ router.push("/event-types");
+ showToast("Event Type updated", "success");
setSuccessModalOpen(true);
}
@@ -250,7 +254,7 @@ export default function EventTypePage({
"Content-Type": "application/json",
},
});
-
+ showToast("Event Type deleted", "success");
router.push("/event-types");
}
@@ -876,6 +880,7 @@ export default function EventTypePage({
navigator.clipboard.writeText(
window.location.hostname + "/" + user.username + "/" + eventType.slug
);
+ showToast("Link copied!", "success");
}}
type="button"
className="flex text-md font-medium text-neutral-700">
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index fce16851..2553040a 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -19,6 +19,7 @@ import { useRouter } from "next/router";
import React, { Fragment, useRef } from "react";
import Shell from "../../components/Shell";
import prisma from "../../lib/prisma";
+import showToast from "@lib/notification";
export default function Availability({ user, types }) {
const [session, loading] = useSession();
@@ -54,6 +55,7 @@ export default function Availability({ user, types }) {
if (enteredTitle && enteredLength) {
await router.replace(router.asPath);
}
+ showToast("Event Type created", "success");
}
function autoPopulateSlug() {
@@ -237,6 +239,7 @@ export default function Availability({ user, types }) {