feat(WEB-154): my profile view

components/Modal/Header/header.module.css

@@ -0,0 +1 @@
+.header {}

components/Modal/Header/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./header.module.css"
+
+export default function Header({ children }: React.PropsWithChildren) {
+  return (
+    <header className={styles.header}>
+      {children}
+    </header>
+  )
+}

components/Modal/Modal/index.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react"
+
+import styles from "./modal.module.css"
+
+const Modal = forwardRef<HTMLDivElement, React.PropsWithChildren>(
+  function ({ children }, ref) {
+    return (
+      <div
+        className={styles.modal}
+        ref={ref}
+        role="dialog"
+        tabIndex={-1}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Modal.displayName = "Modal"
+
+export default Modal

components/Modal/Modal/modal.module.css

@@ -0,0 +1,11 @@
+.modal {
+  background-color: var(--some-white-color, #F2F2F2);
+  border-radius: 0.4rem;
+  left: 50%;
+  outline: none;
+  overflow: auto;
+  padding: 3.5rem 7rem;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

components/Modal/Overlay/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { useCallback, useLayoutEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useHandleKeyPress } from "@/hooks/useHandleKeyPress";
+
+import styles from "./overlay.module.css"
+
+export default function Overlay({ children }: React.PropsWithChildren) {
+  const router = useRouter()
+
+  const handleOnClose = useCallback(() => {
+    return router.back()
+  }, [router])
+
+  const handleOnEscape = useCallback((evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      handleOnClose()
+    }
+  }, [handleOnClose])
+
+  useHandleKeyPress(handleOnEscape)
+
+  useLayoutEffect(() => {
+    // Get original body overflow
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    // Prevent scrolling on mount
+    document.body.style.overflow = 'hidden';
+    // Re-enable scrolling when component unmounts
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={handleOnClose}
+      role="button"
+    >
+      {children}
+    </div>
+  );
+};

components/Modal/Overlay/overlay.module.css

@@ -0,0 +1,9 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+}

components/Modal/Portal.tsx

@@ -0,0 +1,9 @@
+"use client"
+import { createPortal } from 'react-dom';
+
+export default function Portal({ children }: React.PropsWithChildren) {
+  return createPortal(
+    children,
+    document.body
+  );
+};

components/Modal/Title/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./title.module.css"
+
+export default function Title({ children }: React.PropsWithChildren) {
+  return (
+    <h1 className={styles.heading}>
+      {children}
+    </h1>
+  )
+}

components/Modal/Title/title.module.css

@@ -0,0 +1 @@
+.heading {}

components/Modal/index.tsx

@@ -0,0 +1,20 @@
+import Header from "./Header"
+import UiModal from "./Modal"
+import Overlay from "./Overlay"
+import Portal from "./Portal"
+import Title from "./Title"
+
+export default function Modal({ children }: React.PropsWithChildren) {
+  return (
+    <Portal>
+      <Overlay>
+        <UiModal>
+          {children}
+        </UiModal>
+      </Overlay>
+    </Portal>
+  )
+}
+
+Modal.Header = Header
+Modal.Title = Title