101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { usePathname } from 'next/navigation'
|
|
import { AccountSidebarProps } from '@/app/types'
|
|
import Logout from './Logout'
|
|
import noPhoto from '../public/images/noPhoto.png'
|
|
|
|
const AccountSidebar: React.FC<AccountSidebarProps> = ({ user, navigation }) => {
|
|
const pathname = usePathname()
|
|
|
|
if (!user) {
|
|
return null
|
|
}
|
|
const navigationItems = navigation
|
|
|
|
const getAccountTypeStyles = (accountType: string) => {
|
|
switch (accountType.toLowerCase()) {
|
|
case 'lite':
|
|
return 'bg-gray-400 text-white'
|
|
case 'standart':
|
|
return 'bg-orange/70 text-white'
|
|
case 'premium':
|
|
return 'bg-blue-300'
|
|
default:
|
|
return 'bg-gray-200'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex w-full items-center space-x-4 rounded-2xl bg-white p-4 shadow">
|
|
<div className="flex items-center justify-center">
|
|
{user.image ? (
|
|
<Image
|
|
src={user.image}
|
|
alt="Profile"
|
|
height={84}
|
|
width={84}
|
|
className="aspect-square w-full rounded-2xl object-cover md:w-[84px]"
|
|
priority
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={noPhoto}
|
|
alt="Фотографии пока что нет"
|
|
height={84}
|
|
width={84}
|
|
priority
|
|
className="aspect-square w-full rounded-2xl object-cover md:w-[84px]"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-xl font-bold">{user.name || 'Пользователь'}</p>
|
|
<p className="text-sm font-medium text-gray-500">ID: {user.uuid || 'Not available'}</p>
|
|
{user.account_type && (
|
|
<Link
|
|
href="payments/"
|
|
className={`${getAccountTypeStyles(
|
|
user.account_type
|
|
)} flex items-center justify-center rounded-lg px-3 py-1 text-sm`}
|
|
>
|
|
{user.account_type.charAt(0).toUpperCase() + user.account_type.slice(1)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
|
|
<nav className="space-y-2">
|
|
{navigationItems.map(item => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`${
|
|
isActive ? 'bg-orange text-white' : 'text-gray-600 hover:bg-gray-100'
|
|
} flex items-center rounded-lg p-4 text-sm font-medium transition-colors`}
|
|
>
|
|
<item.icon
|
|
className={`mr-3 h-5 w-5 ${isActive ? 'text-white' : 'text-gray-400'}`}
|
|
/>
|
|
{item.name}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
<div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
|
|
<Logout />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AccountSidebar
|