feat: create component modal, popup and form input

app/app.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@plugin "@tailwindcss/typography";
 
 @theme {
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,

app/components/popup/modal.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+interface ModalProperties {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+export default function PopupModal({
+  isOpen,
+  onClose,
+  children,
+}: ModalProperties) {
+  if (!isOpen) return
+  return (
+    <>
+      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
+        <button
+          onClick={onClose}
+          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
+        >
+          ✖
+        </button>
+        <div className="relative rounded-lg bg-white p-6 shadow-lg">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

app/components/popup/succes-payment.tsx

@@ -0,0 +1,48 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function PopupSuccessPayment() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">Selamat! Pembayaran anda berhasil!</p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/popup/succes-register.tsx

@@ -0,0 +1,48 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function PopupSuccesRegister() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">Selamat! pendaftaran anda berhasil!</p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/popup/succes-reset-pass.tsx

@@ -0,0 +1,50 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function PopupSuccessResetPass() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Link Reset Password telah dikirmkan ke email anda
+          </p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/banner.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router'
 
 import { APP } from '~/data/meta'
 
-export const Banner = () => {
+export default function Banner() {
   return (
     <div className="min-h-[65px] sm:mx-10">
       <div className="relative">

app/components/ui/form-forgot-password.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function FormForgotPassword() {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[100px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
+          </p>
+        </div>
+
+        <form>
+          {/* Input Email / No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="mb-1 block text-gray-700"
+            >
+              Email/No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
+            />
+          </div>
+
+          {/* Tombol Masuk */}
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Daftar
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

app/components/ui/form-login.tsx

@@ -28,7 +28,7 @@ const FormLogin = () => {
             <img
               src={APP.logo}
               alt={APP.title}
-              className="h-[100px]"
+              className="h-[80px]"
             />
           </Link>
         </div>

app/components/ui/form-register .tsx

@@ -0,0 +1,141 @@
+// import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function FormRegister() {
+  const [showPassword, setShowPassword] = useState(false)
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[800px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
+          </p>
+        </div>
+
+        <form>
+          {/* Input Email / No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="mb-1 block text-gray-700"
+            >
+              Email/No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
+            />
+          </div>
+
+          {/* Input Password */}
+          <div className="relative mb-4">
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Masukkan Kata Sandi"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              required
+            />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* Reinput Password */}
+          <div className="relative mb-4">
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Ulangi Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Masukkan Kata Sandi"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              required
+            />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="no-telpon"
+              className="mb-1 block text-gray-700"
+            >
+              No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              required
+            />
+          </div>
+
+          {/* Subscribe*/}
+          <div className="mb-4">
+            <label
+              htmlFor="subscription"
+              className="mb-1 block text-gray-700"
+            >
+              Subscription
+            </label>
+            <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
+              <option selected>Subscription</option>
+            </select>
+          </div>
+
+          {/* Tombol Masuk */}
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Daftar
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

app/components/ui/form-subscription.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function FormSubscription() {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
+          </p>
+        </div>
+
+        <form>
+          {/* Subscribe*/}
+          <div className="mb-4">
+            <label
+              htmlFor="subscription"
+              className="mb-1 block text-gray-700"
+            >
+              Subscription
+            </label>
+            <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
+              <option selected>Subscription</option>
+            </select>
+          </div>
+
+          {/* Tombol Masuk */}
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Daftar
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

app/components/ui/modal.tsx

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react'
-
-interface ModalProperties {
-  isOpen: boolean
-  onClose: () => void
-  children: ReactNode
-}
-
-const Modal = ({ isOpen, onClose, children }: ModalProperties) => {
-  if (!isOpen) return
-
-  return (
-    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-      {/* Modal Container */}
-      <div className="animate-fade-in relative rounded-lg bg-white p-6 shadow-lg">
-        {/* Tombol Close */}
-        <button
-          onClick={onClose}
-          className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
-        >
-          ✖
-        </button>
-        <h1>test</h1>
-        {/* Modal Content */}
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Modal

app/layouts/header-menu-mobile.tsx

@@ -13,11 +13,11 @@ export default function HeaderMenuMobile() {
   }
   return (
     <>
-      <div className="relative z-50 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
+      <div className="relative z-40 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
         <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
           {/* Menu */}
           <div
-            className={`z-50 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
+            className={`z-40 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
               isMenuOpen ? 'translate-x-0' : '-translate-x-full'
             }`}
           >
@@ -38,8 +38,11 @@ export default function HeaderMenuMobile() {
 
             {/* List Menu */}
             <ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
-              {MENU.map((item) => (
+              {MENU.map((item, index) => (
-                <li className="px-3 max-lg:border-b max-lg:py-3">
+                <li
+                  key={index}
+                  className="px-3 max-lg:border-b max-lg:py-3"
+                >
                   <Link
                     key={item.title}
                     to={item.url}
@@ -78,7 +81,7 @@ export default function HeaderMenuMobile() {
               </svg>
             </button>
             <div className="w-full py-3">
-              <HeaderSearch></HeaderSearch>
+              <HeaderSearch />
             </div>
           </div>
         </div>

app/layouts/header-top.tsx

@@ -1,42 +1,59 @@
+import { useState } from 'react'
 import { Link } from 'react-router'
 
+import PopupModal from '~/components/popup/modal'
 import { Button } from '~/components/ui/button'
+import FormLogin from '~/components/ui/form-login'
 import { APP } from '~/data/meta'
 
 export const HeaderTop = () => {
+  const [isModalOpen, setModalOpen] = useState(false)
   return (
-    <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
+    <>
-      <Link
+      <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
-        to="/news"
+        <Link
-        className="mt-2 h-full py-2"
+          to="/news"
-      >
+          className="mt-2 h-full py-2"
-        <img
-          src={APP.logo}
-          alt={APP.title}
-          className="h-3/4 w-auto sm:h-full"
-        />
-      </Link>
-      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
-        {APP.description}
-      </div>
-      <div className="flex items-center gap-[15px]">
-        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
-          About Us
-        </Button>
-        <Button
-          variant="newsSecondary"
-          className="hidden sm:block"
         >
-          Akun
-        </Button>
-        <div className="w-[50px] sm:w-[60px]">
           <img
-            alt="language"
+            src={APP.logo}
-            src="/flags/id.svg"
+            alt={APP.title}
-            className="shadow-sm"
+            className="h-3/4 w-auto sm:h-full"
           />
+        </Link>
+        <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
+          {APP.description}
+        </div>
+        <div className="flex items-center gap-[15px]">
+          <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
+            About Us
+          </Button>
+          <Button
+            variant="newsSecondary"
+            className="hidden sm:block"
+            onClick={() => setModalOpen(true)}
+          >
+            Akun
+          </Button>
+          <div
+            className="w-[50px] sm:w-[60px]"
+            onClick={() => setModalOpen(true)}
+          >
+            <img
+              alt="language"
+              src="/flags/id.svg"
+              className="shadow-sm"
+            />
+          </div>
         </div>
       </div>
-    </div>
+
+      <PopupModal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+      >
+        <FormLogin />
+      </PopupModal>
+    </>
   )
 }

app/routes/_layout.auth.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+
+import PopupModal from '~/components/popup/modal'
+import FormLogin from '~/components/ui/form-login'
+
+const AuthLayout = () => {
+  const [isModalOpen, setModalOpen] = useState(true)
+
+  return (
+    <div className="relative">
+      <div className="flex min-h-screen items-center justify-center bg-gray-100">
+        {/* Modal */}
+        <PopupModal
+          isOpen={isModalOpen}
+          onClose={() => setModalOpen(true)}
+        >
+          <FormLogin />
+        </PopupModal>
+      </div>
+    </div>
+  )
+}
+export default AuthLayout

app/routes/_layout.news.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router'
 
-import { Banner } from '~/components/ui/banner'
+import Banner from '~/components/ui/banner'
 import { FooterLinks } from '~/layouts/footer-links'
 import { FooterNewsletter } from '~/layouts/footer-newsletter'
 import { HeaderMenu } from '~/layouts/header-menu'

app/routes/_layout.register.tsx

@@ -1,11 +0,0 @@
-import FormLogin from '~/components/ui/form-login'
-
-const RegisterLayout = () => {
-  return (
-    <main>
-      <FormLogin />
-    </main>
-  )
-}
-
-export default RegisterLayout