navbar changed

2026-03-30 14:35:20 +05:00
parent 6265edf673
commit 8d9b1fcfdd
20 changed files with 423 additions and 100 deletions
--- a/src/features/auth/login/ui/form.tsx
+++ b/src/features/auth/login/ui/form.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import { formatPhone, normalizeDigits } from '../lib/formatPhone';
+import { Input } from '@/shared/ui/input';
+import { Button } from '@/shared/ui/button';
+import PhonePrefix from './phonePrefix';
+import { useLoginForm } from '../lib/useLoginForm';
+import { Label } from '@/shared/ui/label';
+import { X } from 'lucide-react';
+import { useLoginModal } from '../lib/togle';
+
+// ============================= //
+
+export default function LoginForm() {
+  const t = useTranslations();
+  const [isFocused, setIsFocused] = useState(false);
+
+  // ========== Handlers ========== //
+
+  const handlePhoneChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setPhone(normalizeDigits(e.target.value));
+    },
+    [],
+  );
+
+  // ============================== //
+
+  const { phone, setPhone, submit, error, loading } = useLoginForm();
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+
+  return (
+    <div>
+      <header className="w-full " onClick={toggleLoginModal}>
+        <X />
+      </header>
+      <form onSubmit={submit} className="space-y-6 text-center">
+        {/* PHONE FIELD */}
+        <div className="space-y-2">
+          <Label htmlFor="phone" className="text-sm font-medium">
+            {t('auth.login_phone')}
+          </Label>
+
+          <div
+            className={`relative transition-all duration-300 ${
+              isFocused ? 'scale-[1.02]' : ''
+            }`}
+          >
+            <PhonePrefix isFocused={isFocused} />
+
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="90 123 45 67"
+              value={formatPhone(phone)}
+              onChange={handlePhoneChange}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              className={`pl-30 h-12 text-base font-medium border-2 transition-all ${
+                isFocused
+                  ? 'border-kok shadow-md shadow-kok/20 bg-kok/5'
+                  : 'border-border hover:border-kok/50'
+              } ${error && 'border-destructive'}`}
+            />
+          </div>
+
+          {/* Helper text */}
+          <div className="flex justify-between items-center px-1">
+            <p className="text-xs text-muted-foreground">
+              {phone.length > 0 &&
+                t('auth.entered_digits', { count: phone.length })}
+            </p>
+
+            {phone.length === 9 && (
+              <span className="text-xs text-green-600 font-medium slide-in-from-right-2">
+                ✓ {t('auth.full')}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20 animate-in">
+            {error}
+          </div>
+        )}
+
+        <Button
+          type="submit"
+          disabled={loading || phone.length !== 9}
+          className="w-full h-12 mt-5 bg-linear-to-r from-blue-600 to-indigo-600 hover:scale-[1.02] text-base font-semibold transition-all shadow-lg hover:shadow-xl active:scale-95"
+        >
+          {loading ? (
+            <span className="flex items-center gap-2">
+              <span className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              {t('auth.otp_sending')}
+            </span>
+          ) : (
+            t('auth.otp')
+          )}
+        </Button>
+
+        {/* DIVIDER */}
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t border-border" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              {t('auth.or_continue')}
+            </span>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}