backend - edit main tab

frontend/components/Header.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import Burger from './ui/Burger'
 import LangSwitcher from './LangSwitcher'
 import Button from './ui/Button'
+import UserLogin from './UserLogin'
 
 const Header = () => {
   return (
@@ -34,18 +35,7 @@ const Header = () => {
           className="hidden md:block bg-orange hover:bg-orange/80 px-4 py-3 text-white"
         />
 
-        <div className="hidden md:block text-base font-medium">
-          <Link
-            href="/register"
-            className="hover:text-orange transition-colors"
-          >
-            Регистрация
-          </Link>
-          <span> / </span>
-          <Link href="/login" className="hover:text-orange transition-colors">
-            Войти
-          </Link>
-        </div>
+        <UserLogin />
 
         <div className="flex items-center space-x-4 md:hidden">
           <Link href="/login">

frontend/components/UserLogin.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import Button from './ui/Button'
+import useUserStore from '@/app/store/userStore'
+
+const UserLogin = () => {
+  const { isAuthenticated, user } = useUserStore()
+  const isUserAuth = isAuthenticated && user
+
+  // определяем отображаемое имя и путь для редиректа
+  const getDisplayNameAndPath = () => {
+    if (isUserAuth) {
+      return {
+        name: user?.name || 'пользователь',
+        path: '/account',
+      }
+    }
+
+    return {
+      name: 'Зарегистрироваться',
+      path: '/register',
+    }
+  }
+
+  const { name, path } = getDisplayNameAndPath()
+
+  if (!isUserAuth) {
+    return (
+      <div className="hidden md:block text-base font-medium">
+        <Link href="/register" className="hover:text-orange transition-colors">
+          Регистрация
+        </Link>
+        <span> / </span>
+        <Link href="/login" className="hover:text-orange transition-colors">
+          Войти
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <Link href={path} className="ml-2 sm:ml-5">
+      <Button
+        text={isUserAuth ? `Привет, ${name}!` : name}
+        className={`
+          text-sm sm:text-base 
+          py-2 sm:py-3 
+          px-3 sm:px-4 
+          bg-orange text-white
+          flex items-center 
+          rounded-2xl 
+          whitespace-nowrap
+          hover:bg-orange/80
+        `}
+      />
+    </Link>
+  )
+}
+
+export default UserLogin