Added ui dialog

ui/Dialog.tsx

@@ -0,0 +1,54 @@
+import { cn } from '@/lib/utils';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ReactNode } from 'react';
+import Icon from './Icon';
+// import Tooltip from './Tooltip';
+
+type DialogProps = {
+  title?: ReactNode;
+  tooltip: ReactNode;
+  trigger: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  fullscreen?: boolean;
+  className?: string;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export default function Dialog({
+  title,
+  tooltip,
+  trigger,
+  children,
+  open,
+  fullscreen,
+  className,
+  onOpenChange
+}: DialogProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      {/* <Tooltip label={tooltip}> */}
+      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
+      {/* </Tooltip> */}
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-highlight-primary/50" />
+        <DialogPrimitive.Content
+          className={cn(
+            'fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2  transform flex-col overflow-hidden rounded-lg bg-primary-800 shadow-lg sm:w-1/3 sm:bg-primary-800/50',
+            className
+          )}
+        >
+          {title && (
+            <div className="flex w-full justify-between pb-4">
+              {title}
+              <DialogPrimitive.Trigger>
+                <Icon name="close-fill" className="hover:text-highlight-secondary" />
+              </DialogPrimitive.Trigger>
+            </div>
+          )}
+          {children}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}