63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
'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
|