blob: 1e07e4293b043a7cddfc5b584382f1eed5b8033b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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-secondary 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>
);
}
|