111 lines
3.2 KiB
TypeScript
111 lines
3.2 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 items-center space-x-4 w-full bg-white rounded-2xl shadow p-4">
|
|
<div className="flex items-center justify-center">
|
|
{user.image ? (
|
|
<Image
|
|
src={user.image}
|
|
alt="Profile"
|
|
height={84}
|
|
width={84}
|
|
className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
|
|
priority
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={noPhoto}
|
|
alt="Фотографии пока что нет"
|
|
height={84}
|
|
width={84}
|
|
priority
|
|
className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
|
|
/>
|
|
)}
|
|
</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 py-1 px-3 text-sm rounded-lg`}
|
|
>
|
|
{user.account_type.charAt(0).toUpperCase() +
|
|
user.account_type.slice(1)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
|
|
<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 p-4 text-sm font-medium rounded-lg 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 md:w-64 bg-white rounded-2xl shadow p-2">
|
|
<Logout />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AccountSidebar
|