feat: create AuthLayout component and refactor modal usage in forms

app/components/ui/button.tsx

@@ -11,6 +11,7 @@ const buttonVariants = cva(
         newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
         newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
         icon: '',
+        link: '',
       },
       size: {
         default: 'h-[50px] w-[150px]',
@@ -18,6 +19,7 @@ const buttonVariants = cva(
         icon: 'h-9 w-9',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
+        fit: 'w-fit',
       },
     },
     defaultVariants: {

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

@@ -1,13 +1,8 @@
-import HeaderModal from '~/components/popup/header-modal'
 import { Button } from '~/components/ui/button'
 
 export default function FormForgotPassword() {
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}

app/components/ui/form-login.tsx

@@ -1,33 +1,23 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
-import { Button } from '@headlessui/react'
-import { useState } from 'react'
+import { useState, type Dispatch, type SetStateAction } from 'react'
 import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
-import { APP } from '~/data/meta'
 
-const FormLogin = () => {
+import { Button } from './button'
+
+type TProperties = {
+  setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
+  setIsLoginOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export const FormLogin = (properties: TProperties) => {
+  const { setIsRegisterOpen, setIsLoginOpen } = properties
   const [showPassword, setShowPassword] = useState(false)
 
   return (
     <div className="flex items-center justify-center">
       <div className="w-full max-w-md">
-        <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 daftarkan akun Anda untuk melanjutkan!
-          </p>
-        </div>
-
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -96,16 +86,19 @@ const FormLogin = () => {
         {/* Link Daftar */}
         <div className="mt-4 text-center text-sm">
           Belum punya akun?{' '}
-          <Link
-            to="/register"
+          <Button
+            onClick={() => {
+              setIsLoginOpen(false)
+              setIsRegisterOpen(true)
+            }}
             className="font-semibold text-[#2E2F7C]"
+            variant="link"
+            size="fit"
           >
             Daftar Disini
-          </Link>
+          </Button>
         </div>
       </div>
     </div>
   )
 }
-
-export default FormLogin

app/components/ui/form-register.tsx

@@ -1,16 +1,11 @@
 import { useState } from 'react'
 
-import HeaderModal from '~/components/popup/header-modal'
 import { Button } from '~/components/ui/button'
 
-export default function FormRegister() {
+export const FormRegister = () => {
   const [showPassword, setShowPassword] = useState(false)
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan data Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}

app/components/ui/form-subscription.tsx

@@ -1,16 +1,8 @@
 import { Button } from '@headlessui/react'
 
-import HeaderModal from '~/components/popup/header-modal'
-
 export default function FormSubscription() {
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>
-          Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
-        </p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Subscribe*/}