locker buttons if user doesnt have required membership
This commit is contained in:
@@ -8,10 +8,7 @@ import { AccountSidebarProps } from '@/app/types'
|
||||
import Logout from './Logout'
|
||||
import noPhoto from '../public/images/noPhoto.png'
|
||||
|
||||
const AccountSidebar: React.FC<AccountSidebarProps> = ({
|
||||
user,
|
||||
navigation,
|
||||
}) => {
|
||||
const AccountSidebar: React.FC<AccountSidebarProps> = ({ user, navigation }) => {
|
||||
const pathname = usePathname()
|
||||
|
||||
if (!user) {
|
||||
@@ -34,7 +31,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
|
||||
|
||||
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 w-full items-center space-x-4 rounded-2xl bg-white p-4 shadow">
|
||||
<div className="flex items-center justify-center">
|
||||
{user.image ? (
|
||||
<Image
|
||||
@@ -42,7 +39,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
|
||||
alt="Profile"
|
||||
height={84}
|
||||
width={84}
|
||||
className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
|
||||
className="aspect-square w-full rounded-2xl object-cover md:w-[84px]"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
@@ -52,47 +49,40 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
|
||||
height={84}
|
||||
width={84}
|
||||
priority
|
||||
className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
|
||||
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>
|
||||
<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`}
|
||||
)} flex items-center justify-center rounded-lg px-3 py-1 text-sm`}
|
||||
>
|
||||
{user.account_type.charAt(0).toUpperCase() +
|
||||
user.account_type.slice(1)}
|
||||
{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">
|
||||
<div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
|
||||
<nav className="space-y-2">
|
||||
{navigationItems.map((item) => {
|
||||
{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`}
|
||||
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'
|
||||
}`}
|
||||
className={`mr-3 h-5 w-5 ${isActive ? 'text-white' : 'text-gray-400'}`}
|
||||
/>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -100,7 +90,7 @@ const AccountSidebar: React.FC<AccountSidebarProps> = ({
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
|
||||
<div className="w-full rounded-2xl bg-white p-2 shadow md:w-64">
|
||||
<Logout />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user