1 files changed, 50 insertions, 0 deletions
diff --git a/apps/web/app/(dash)/dialogTriggerWrapper.tsx b/apps/web/app/(dash)/dialogTriggerWrapper.tsx
new file mode 100644
index 00000000..7dcfc355
--- /dev/null
+++ b/apps/web/app/(dash)/dialogTriggerWrapper.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Dialog, DialogTrigger } from "@repo/ui/shadcn/dialog";
+import { useState } from "react";
+import { DialogContentContainer } from "./dialogContentContainer";
+import { PlusIcon } from "@heroicons/react/24/solid";
+
+export function DialogDesktopTrigger() {
+	return (
+		<DialogTriggerWrapper>
+			<div className="border-gray-700/50 border-[1px] space-y-4 group relative bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl flex justify-center">
+				<button className="cursor-pointer p-2 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
+					<PlusIcon className="h-6 w-6" />
+				</button>
+				<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1 left-[120%] -top-2">
+					Add Memories
+				</div>
+			</div>
+		</DialogTriggerWrapper>
+	);
+}
+
+export function DialogMobileTrigger() {
+	return (
+		<DialogTriggerWrapper>
+			<div className={`flex flex-col items-center cursor-pointer text-white`}>
+				<PlusIcon className="h-6 w-6 hover:brightness-125 focus:brightness-125 duration-200 stroke-white" />
+				<p className="text-xs text-foreground-menu mt-2">Add</p>
+			</div>
+		</DialogTriggerWrapper>
+	);
+}
+export default function DialogTriggerWrapper({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const [dialogOpen, setDialogOpen] = useState(false);
+
+	return (
+		<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+			<DialogTrigger>{children}</DialogTrigger>
+			<DialogContentContainer
+				DialogClose={() => {
+					setDialogOpen(false);
+				}}
+			/>
+		</Dialog>
+	);
+}