feat: create Modal component with trigger and close functionality usi…

…ng Radix UI and Phosphor icons
kobykotiv · Oct 14, 2024 · 574e5ef · 574e5ef
1 parent 455682e
commit 574e5ef
Showing 1 changed file with 67 additions and 0 deletions.
diff --git a/app/components/modal.tsx b/app/components/modal.tsx
@@ -0,0 +1,67 @@
+import { X } from "@phosphor-icons/react";
+import {
+  Close,
+  Content,
+  type DialogCloseProps,
+  type DialogContentProps,
+  type DialogProps,
+  type DialogTriggerProps,
+  Overlay,
+  Portal,
+  Root,
+  Trigger,
+} from "@radix-ui/react-dialog";
+import type React from "react";
+import { forwardRef } from "react";
+import { cn } from "~/lib/cn";
+
+export let Modal: React.FC<DialogProps> = Root;
+
+export let ModalTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(
+  ({ asChild = true, ...rest }, ref) => {
+    return <Trigger asChild={asChild} {...rest} ref={ref} />;
+  }
+);
+
+interface ModalContentProps extends DialogContentProps {}
+
+export let ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <Portal>
+        <Overlay className="fixed inset-0 z-10" />
+        <Content
+          {...rest}
+          ref={ref}
+          className={cn(
+            "data-[state='open']:animate-slide-down-and-fade",
+            "fixed inset-0 z-10 flex items-center overflow-x-hidden bg-gray-900/50 px-4"
+          )}
+        >
+          <div
+            style={{ maxHeight: "90vh" }}
+            className={cn(
+              "animate-slide-down-and-fade relative overflow-hidden",
+              "w-full mx-auto h-auto max-w-screen-xl"
+            )}
+          >
+            <ModalClose />
+            <div className={cn("bg-white shadow p-6", className)}>
+              {children}
+            </div>
+          </div>
+        </Content>
+      </Portal>
+    );
+  }
+);
+
+export let ModalClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
+  ({ asChild, children, ...rest }, ref) => {
+    return (
+      <Close asChild {...rest} ref={ref}>
+        <X className="absolute right-3 top-3 cursor-pointer" size={20} />
+      </Close>
+    );
+  }
+);