84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
import { SharedData } from '@/types/global';
|
|
import { router, usePage } from '@inertiajs/react';
|
|
import { GraduationCap, Heart, LayoutDashboard, LogOut, SettingsIcon, UserCircle } from 'lucide-react';
|
|
import { nanoid } from 'nanoid';
|
|
|
|
const ProfileToggle = () => {
|
|
const { props } = usePage<SharedData>();
|
|
const { user } = props.auth;
|
|
const { button } = props.translate;
|
|
const showWishlist = props.system.fields?.show_student_wishlist !== false;
|
|
|
|
const studentMenuItems = [
|
|
{
|
|
id: nanoid(),
|
|
name: button.my_courses,
|
|
slug: 'courses',
|
|
Icon: GraduationCap,
|
|
},
|
|
...(showWishlist
|
|
? [
|
|
{
|
|
id: nanoid(),
|
|
name: button.wishlist,
|
|
slug: 'wishlist',
|
|
Icon: Heart,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
id: nanoid(),
|
|
name: button.profile,
|
|
slug: 'profile',
|
|
Icon: UserCircle,
|
|
},
|
|
{
|
|
id: nanoid(),
|
|
name: button.settings,
|
|
slug: 'settings',
|
|
Icon: SettingsIcon,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="cursor-pointer outline-none">
|
|
{user && user.photo ? (
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarImage src={user.photo} alt={user.name ?? ''} className="h-full w-full content-center object-cover" />
|
|
<AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
) : (
|
|
<UserCircle className="text-muted-foreground h-9 w-9 rounded-full" />
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end" className="w-[160px]">
|
|
{(user.role === 'admin' || user.role === 'instructor') && (
|
|
<DropdownMenuItem className="cursor-pointer px-3" onClick={() => router.get(route('dashboard'))}>
|
|
<LayoutDashboard className="mr-1 h-4 w-4" />
|
|
<span>{button.dashboard}</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
|
|
{(user.role === 'student' || user.role === 'instructor') &&
|
|
studentMenuItems.map(({ id, name, Icon, slug }) => (
|
|
<DropdownMenuItem key={id} className="cursor-pointer px-3" onClick={() => router.get(route('student.index', { tab: slug }))}>
|
|
<Icon className="mr-1 h-4 w-4" />
|
|
<span>{name}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
|
|
<DropdownMenuItem className="cursor-pointer px-3" onClick={() => router.post('/logout')}>
|
|
<LogOut className="mr-1 h-4 w-4" />
|
|
<span>{button.logout}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
|
|
export default ProfileToggle;
|