77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
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>
|
||
<div className="md:hidden">
|
||
<Link href="/login">
|
||
<Image
|
||
src="/images/userlogo.png"
|
||
alt="user"
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
</Link>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Link href={path} className="ml-2 sm:ml-5">
|
||
<Button
|
||
text={isUserAuth ? `Привет, ${name}!` : name}
|
||
className="hidden md:flex text-sm sm:text-base py-2 sm:py-3 px-3 sm:px-4 bg-orange text-white items-center rounded-2xl whitespace-nowrap hover:bg-orange/80"
|
||
/>
|
||
<Image
|
||
src="/images/userlogo.png"
|
||
alt="user"
|
||
width={24}
|
||
height={24}
|
||
className="md:hidden"
|
||
/>
|
||
</Link>
|
||
)
|
||
}
|
||
|
||
export default UserLogin
|