locker buttons if user doesnt have required membership

This commit is contained in:
2025-05-29 13:34:47 +03:00
parent 91c6693190
commit e30eb10d7d
4 changed files with 90 additions and 39 deletions

View File

@@ -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>