rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add risk creation form

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-05-21 17:20:24 +02:00
committed by Sacha Al Himdani
parent 15cf471454
commit 3d4ecf5f8f
29 changed files with 1330 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/ui/src/Molecules/Dialog/Dialog.tsx
View File

@@ -6,53 +6,58 @@ import {
Content,
Title,
Close,
Description,
} from "@radix-ui/react-dialog";
import { IconCrossLargeX } from "../../Atoms/Icons";
import type { HTMLAttributes, ReactNode } from "react";
import { type HTMLAttributes, type ReactNode } from "react";
import { Button } from "../../Atoms/Button/Button";
import { useTranslate } from "@probo/i18n";
import clsx from "clsx";
type Props = {
onClose: () => void;
trigger: ReactNode;
title: ReactNode;
children?: ReactNode;
onOpenChange?: (open: boolean) => void;
open?: boolean;
};
export function Dialog({ onClose, trigger, title, children, open }: Props) {
const onOpenChange = (open: boolean) => {
if (!open) {
onClose();
}
};
export function Dialog({
trigger,
title,
children,
onOpenChange,
open,
}: Props) {
return (
<Root open={open} onOpenChange={onOpenChange}>
<Trigger asChild>{trigger}</Trigger>
<Portal>
<Overlay className="fixed inset-0 z-50 bg-dialog/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<div className="fixed grid place-items-center inset-0 z-50">
<Content
aria-describedby={undefined}
className="bg-level-2 rounded-2xl max-w-5xl w-[95%]"
>
<div className="flex justify-between items-center p-3 border-b border-b-border-low">
<Title className="text-sm font-medium">
{title}
</Title>
<Close asChild>
<Button
variant="tertiary"
icon={IconCrossLargeX}
/>
</Close>
</div>
{children}
</Content>
</div>
<Overlay
className={clsx(
"fixed inset-0 z-50 bg-dialog/40",
`duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,
)}
/>
<Content
aria-describedby={undefined}
className={clsx(
"fixed inset-0 m-auto z-50 w-full h-max bg-level-2 rounded-2xl max-w-5xl w-[95%]",
`duration-200
data-[state=open]:animate-in data-[state=closed]:animate-out
data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
data-[state=closed]:slide-out-to-top-5
data-[state=open]:slide-in-from-top-5`,
)}
>
<div className="flex justify-between items-center p-3 border-b border-b-border-low">
<Title className="text-sm font-medium">{title}</Title>
<Close asChild>
<Button variant="tertiary" icon={IconCrossLargeX} />
</Close>
</div>
{children}
</Content>
</Portal>
</Root>
);