46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import * as Dialog from "@radix-ui/react-dialog";
|
|
import { ReactNode } from "react";
|
|
import { icons } from "#/assets/icons"
|
|
import Image from "next/image";
|
|
|
|
export function Modal({
|
|
trigger,
|
|
title,
|
|
content,
|
|
open,
|
|
onOpenChange
|
|
}: {
|
|
trigger: ReactNode;
|
|
title?: string | ReactNode;
|
|
content: ReactNode;
|
|
open?: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
}) {
|
|
return (
|
|
<Dialog.Root open={open} onOpenChange={onOpenChange}>
|
|
<Dialog.Trigger asChild>
|
|
{trigger}
|
|
</Dialog.Trigger>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="fixed inset-0 bg-black/25 z-40" />
|
|
<Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-max flex flex-col gap-10 bg-white rounded-lg shadow-xl z-50 px-16 py-12"
|
|
// onPointerDownOutside={(e) => e.preventDefault()}
|
|
>
|
|
<Dialog.Title className="text-xl font-bold text-center text-[30px] ">
|
|
{title}
|
|
</Dialog.Title>
|
|
|
|
<div className="flex gap-5 justify-center">
|
|
{content}
|
|
</div>
|
|
|
|
<div className="absolute top-5 right-5 text-gray-500 hover:text-gray-700 cursor-pointer"
|
|
onClick={() => {onOpenChange?.(false)}}
|
|
>
|
|
<Image src={icons.crossIcon} alt="fermer"/>
|
|
</div>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
);
|
|
} |