Neah-Enkun/front/components/main-nav.tsx

99 lines
3.3 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import {
Calendar,
MessageSquare,
BotIcon as Robot,
PenTool,
Bell,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Sidebar } from "./sidebar";
import { useSession } from "next-auth/react";
export function MainNav() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const { data: session } = useSession();
console.log(session);
return (
<>
<div className='flex items-center justify-between p-4 bg-black'>
<div className='flex items-center space-x-4'>
<button
className='text-white/80 hover:text-white'
onClick={() => setIsSidebarOpen(true)}
>
<span className='sr-only'>Toggle menu</span>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
>
<line x1='3' y1='12' x2='21' y2='12'></line>
<line x1='3' y1='6' x2='21' y2='6'></line>
<line x1='3' y1='18' x2='21' y2='18'></line>
</svg>
</button>
<Link href='/'>
<Image
src='https://hebbkx1anhila5yf.public.blob.vercel-storage.com/enkun-4TNAp6sm9vEQNPg8XpLlizNyWW3jPD.svg'
alt='Logo'
width={32}
height={32}
className='text-white'
/>
</Link>
<Link href='/calendar' className='text-white/80 hover:text-white'>
<Calendar className='w-6 h-6' />
</Link>
<Link href='/messages' className='text-white/80 hover:text-white'>
<MessageSquare className='w-6 h-6' />
</Link>
<Link href='/ai-assistant' className='text-white/80 hover:text-white'>
<Robot className='w-6 h-6' />
</Link>
<Link href='/design' className='text-white/80 hover:text-white'>
<PenTool className='w-6 h-6' />
</Link>
<Link
href='/notifications'
className='text-white/80 hover:text-white'
>
<Bell className='w-6 h-6' />
</Link>
</div>
{session ? (
<div className='flex items-center space-x-4'>
<div className='cursor-pointer text-white/80 hover:text-white'>
<span>
{session.user.first_name} {session.user.last_name} -{" "}
{session.user.role.includes("admin") ? "Admin" : ""}
{session.user.role.includes("TEACHERS") ? "Teacher" : ""}
{session.user.role.includes("STUDENTS") ? "Student" : ""}
</span>
</div>
<div className='cursor-pointer text-white/80 hover:text-white'>
<Link href='/api/auth/signout'>Logout</Link>
</div>
</div>
) : (
<div className='cursor-pointer text-white/80 hover:text-white'>
<Link href='/api/auth/signin'>Login</Link>
</div>
)}
</div>
<Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
</>
);
}