From 340bd8c4bf0806b0264a8a8d186f30918c18be0f Mon Sep 17 00:00:00 2001
From: egagofur <egagofurtriwahana@gmail.com>
Date: Sat, 29 Mar 2025 17:26:54 +0700
Subject: [PATCH] feat: add modal login gacha page

---
 apps/gacha/src/app/page.tsx             |  67 +++++++--
 libs/ui/src/molecules/index.ts          |   1 +
 libs/ui/src/molecules/modal/index.tsx   | 190 ++++++++++++++++++++++++
 libs/ui/src/organisms/navbar/navbar.tsx |  16 ++
 4 files changed, 261 insertions(+), 13 deletions(-)
 create mode 100644 libs/ui/src/molecules/modal/index.tsx

diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx
index eefefed..6cac5b2 100644
--- a/apps/gacha/src/app/page.tsx
+++ b/apps/gacha/src/app/page.tsx
@@ -1,9 +1,9 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { Link } from 'react-router';
 
 interface GachaItemProps {
   src: string;
@@ -14,7 +14,6 @@ interface GachaItemProps {
 export const Components: FC = (): ReactElement => {
   // Pinjem
   const [showModal, setShowModal] = useState(false);
-  //
 
   const scrollToRoulette = () => {
     const rouletteSection = document.getElementById('roulette');
@@ -222,16 +221,58 @@ export const Components: FC = (): ReactElement => {
       <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
 
       {/**Izin pake untuk debug modals gacha */}
-      <div>
-        <p>Debug : Test Modals Gacha</p>
-        <Button onClick={
-          () => setShowModal(true)
-        }>Tekan</Button>
-      </div>
-      {showModal && createPortal(
-        <ModalsGacha></ModalsGacha>,
-        document.body
-      )}
+      <button onClick={() => setShowModal(true)}>Open Modal</button>
+      <Modal
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+      >
+        <Modal.Header className="space-y-4">
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
+            Login
+          </h1>
+        </Modal.Header>
+        <Modal.Content className="space-y-4">
+          <InputForm
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Password"
+            placeholder="Masukkan password"
+            type="password"
+            size="lg"
+            className="w-full"
+          />
+          <Link to="/forgot-password">
+            <h1 className="text-end text-primary-500 text-xl font-medium">
+              Lupa Password?
+            </h1>
+          </Link>
+        </Modal.Content>
+        <Modal.Footer className="flex flex-col md:flex-col pt-4">
+          <Button
+            size="md"
+            className="w-full"
+            onClick={() => console.log('Login')}
+          >
+            Login
+          </Button>
+          <div className="flex justify-center gap-2 pt-2.5 font-medium">
+            <p className="text-neutral-500">Belum punya akun?</p>
+            <Link
+              className="text-primary-500 hover:text-primary-600"
+              to="/register"
+            >
+              Daftar disini
+            </Link>
+          </div>
+        </Modal.Footer>
+      </Modal>
       {/**Izin pake untuk debug modals gacha */}
     </Fragment>
   );
diff --git a/libs/ui/src/molecules/index.ts b/libs/ui/src/molecules/index.ts
index dbe5a6d..e13b7fd 100644
--- a/libs/ui/src/molecules/index.ts
+++ b/libs/ui/src/molecules/index.ts
@@ -1,2 +1,3 @@
 export * from './input-form';
 export * from './pagination';
+export * from './modal';
diff --git a/libs/ui/src/molecules/modal/index.tsx b/libs/ui/src/molecules/modal/index.tsx
new file mode 100644
index 0000000..2f0d9ba
--- /dev/null
+++ b/libs/ui/src/molecules/modal/index.tsx
@@ -0,0 +1,190 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { cn } from '@imphnen-frontend-service/utils';
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  closeButtonClassName?: string;
+  disableEscapeKeyDown?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  className,
+  overlayClassName,
+  closeButtonClassName,
+  disableEscapeKeyDown = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+}: ModalProps) => {
+  const handleEscapeKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen && !disableEscapeKeyDown) {
+        onClose();
+      }
+    },
+    [isOpen, onClose, disableEscapeKeyDown]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', handleEscapeKey);
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      window.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, handleEscapeKey]);
+
+  const modalNode = useMemo(() => document.createElement('div'), []);
+
+  useEffect(() => {
+    document.body.appendChild(modalNode);
+    return () => {
+      document.body.removeChild(modalNode);
+    };
+  }, [modalNode]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50">
+      <div
+        className={cn(
+          'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
+          isOpen ? 'opacity-100' : 'opacity-0',
+          overlayClassName
+        )}
+        onClick={onClose}
+        role="presentation"
+      />
+      <div
+        className={cn(
+          'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
+          'sm:rounded-lg sm:max-w-md',
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+      >
+        {children}
+        <button
+          onClick={onClose}
+          className={cn(
+            'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
+            closeButtonClassName
+          )}
+          aria-label="Close modal"
+        >
+          <CloseOutlined className="h-4 w-4 cursor-pointer" />
+        </button>
+      </div>
+    </div>,
+    modalNode
+  );
+};
+
+interface ModalHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalHeader = ({ className, children }: ModalHeaderProps) => (
+  <div
+    className={cn(
+      'mb-4 flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
+
+interface ModalContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalContent = ({ className, children }: ModalContentProps) => (
+  <div className={cn('mb-4', className)}>{children}</div>
+);
+
+interface ModalFooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalFooter = ({ className, children }: ModalFooterProps) => (
+  <div className={cn('flex gap-2 sm:flex-row sm:justify-end', className)}>
+    {children}
+  </div>
+);
+
+interface ModalTitleProps {
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+const ModalTitle = ({ className, children, id }: ModalTitleProps) => (
+  <h2
+    id={id}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+  >
+    {children}
+  </h2>
+);
+
+interface ModalDescriptionProps {
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+const ModalDescription = ({
+  className,
+  children,
+  id,
+}: ModalDescriptionProps) => (
+  <p id={id} className={cn('text-sm text-gray-500', className)}>
+    {children}
+  </p>
+);
+
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
+Modal.Title = ModalTitle;
+Modal.Description = ModalDescription;
+
+export { Modal };
+export type {
+  ModalProps,
+  ModalHeaderProps,
+  ModalContentProps,
+  ModalFooterProps,
+  ModalTitleProps,
+  ModalDescriptionProps,
+};
diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx
index e6822e7..f431833 100644
--- a/libs/ui/src/organisms/navbar/navbar.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.tsx
@@ -40,6 +40,14 @@ export const Navbar: FC = (): ReactElement => {
                   <Link to="#">Merch Gacha</Link>
                 </Button>
               </li>
+              <li>
+                <Button
+                  size="md"
+                  className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
+                >
+                  <Link to="/login">Login</Link>
+                </Button>
+              </li>
             </ul>
             <button
               className={`md:hidden duration-200 ${
@@ -69,6 +77,14 @@ export const Navbar: FC = (): ReactElement => {
                         Merch Gacha
                       </Link>
                     </li>
+                    <li>
+                      <Link
+                        to="#"
+                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                      >
+                        Login
+                      </Link>
+                    </li>
                   </ul>
                 </div>
               )}