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 };

src/components/modal/ModalBackdrop.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-vars */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+
+interface IModalBackdropProps {
+  className?: string;
+  open: boolean;
+  ownerState: any;
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const ModalBackdrop = forwardRef<HTMLDivElement, IModalBackdropProps>(
+  ({ className, ownerState, ...props }, ref) => {
+    const { ...other } = props;
+
+    return (
+      <div
+        ref={ref}
+        className={clsx('modal-backdrop transition-all duration-300 -z-1', className && className)}
+        aria-hidden="true"
+        {...other}
+      />
+    );
+  }
+);
+
+export { ModalBackdrop, type IModalBackdropProps };

src/components/modal/ModalBody.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, ReactNode, CSSProperties } from 'react';
+
+interface IModalBodyProps {
+  className?: string;
+  children: ReactNode;
+  tabIndex?: number;
+  style?: CSSProperties; // Accept inline styles as a prop
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const ModalBody = forwardRef<HTMLDivElement, IModalBodyProps>(
+  ({ className, children, style, tabIndex = -1 }, ref) => {
+    return (
+      <div ref={ref} tabIndex={tabIndex} className={`modal-body ${className}`} style={style}>
+        {children}
+      </div>
+    );
+  }
+);
+
+export { ModalBody };

src/components/modal/ModalContent.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, ReactNode } from 'react';
+
+interface IModalContentProps {
+  className?: string;
+  children: ReactNode;
+  tabIndex?: number;
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const ModalContent = forwardRef<HTMLDivElement, IModalContentProps>(
+  ({ className, children, tabIndex = -1 }, ref) => {
+    return (
+      <div ref={ref} tabIndex={tabIndex} className={`modal-content ${className}`}>
+        {children}
+      </div>
+    );
+  }
+);
+
+export { ModalContent };

src/components/modal/ModalHeader.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, ReactNode } from 'react';
+
+interface IModalHeaderProps {
+  className?: string;
+  children: ReactNode;
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const ModalHeader = forwardRef<HTMLDivElement, IModalHeaderProps>(
+  ({ className, children }, ref) => {
+    return (
+      <div ref={ref} className={`modal-header ${className}`}>
+        {children}
+      </div>
+    );
+  }
+);
+
+export { ModalHeader };

src/components/modal/ModalTitle.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, ReactNode } from 'react';
+
+interface IModalTitleProps {
+  className?: string;
+  children: ReactNode;
+}
+
+// Forwarding ref to ensure this component can hold a ref
+const ModalTitle = forwardRef<HTMLDivElement, IModalTitleProps>(({ className, children }, ref) => {
+  return (
+    <h3 ref={ref} className={`modal-title ${className}`}>
+      {children}
+    </h3>
+  );
+});
+
+export { ModalTitle };

src/components/modal/index.ts

@@ -0,0 +1,6 @@
+export * from './Modal';
+export * from './ModalBackdrop';
+export * from './ModalContent';
+export * from './ModalBody';
+export * from './ModalHeader';
+export * from './ModalTitle';