revamp template

src/components/modal/Modal.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { Modal as MuiModal, ModalProps as BaseModalProps } from '@mui/base/Modal';
+import { ModalBackdrop } from '@/components';
+import clsx from 'clsx';
+
+interface IModalProps extends BaseModalProps {
+  zIndex?: number;
+  className?: string; // For content-specific Tailwind stylesx
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const Modal = forwardRef<HTMLDivElement, IModalProps>(
+  ({ open, onClose, children, className, zIndex = 100, ...props }, ref) => {
+    return (
+      <MuiModal
+        ref={ref}
+        open={open}
+        onClose={onClose}
+        style={{
+          zIndex: `${zIndex}`,
+          opacity: open ? 1 : 0,
+          display: open ? 'block' : 'none'
+        }}
+        className={clsx('modal', className)}
+        {...props} // Spread any additional props
+        slots={{ backdrop: ModalBackdrop }} // Assign custom backdrop
+      >
+        {children}
+      </MuiModal>
+    );
+  }
+);
+
+export { Modal };