feat: Improved Responsiveness

components/Modal/Modal.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useState } from "react"
+
+interface ModalProps {
+  // The content of the modal
+  children: React.ReactNode
+
+  // The visibility of the modal
+  isOpen: boolean
+
+  // Function to close the modal
+  onClose: () => void
+}
+
+export const Modal: React.FC<ModalProps> = ({ children, isOpen, onClose }) => {
+  if (!isOpen) return null
+
+  const hadleClose = (e: any) => {
+    if (e.target.id === "wrapper") onClose()
+  }
+
+  return (
+    <div
+      id="wrapper"
+      onClick={hadleClose}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-25 backdrop-blur-sm"
+    >
+      <div className="flex w-full flex-col lg:w-4/5 xl:w-3/6">
+        <h1 className="cursor-pointer place-self-end font-bold text-white" onClick={() => onClose()}>
+          X
+        </h1>
+        <div className="flex h-full w-full flex-col items-center justify-center place-self-center rounded-md bg-black p-5 drop-shadow-md">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}