modal location updated

src/features/auth/login/ui/form.tsx

@@ -9,8 +9,7 @@ import {
 import PhonePrefix from '../../../../shared/ui/phonePrefix';
 import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
-import { useLoginModal } from '@/shared/zustand/auth';
-import Link from 'next/link';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
 import { useTranslations } from 'next-intl';
 
 export function LoginForm() {
@@ -20,6 +19,9 @@ export function LoginForm() {
 
   const { phone, setPhone, submit, error, loading } = useLoginForm();
   const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );
 
   const handlePhoneChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -149,14 +151,17 @@ export function LoginForm() {
               </div>
 
               {/* Register hint */}
-              <p className="text-center text-[0.78rem] text-stone-400">
+              <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
                 {t('registerPrompt')}
-                <Link
-                  href="/register"
-                  className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
+                <p
+                  onClick={() => {
+                    toggleLoginModal();
+                    toggleRegisterModal();
+                  }}
+                  className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
                   {t('registerLink')}
-                </Link>
+                </p>
               </p>
             </form>
           </div>