update: handle data when login for teacher

lzaycoe · Feb 12, 2025 · 7af20be · 7af20be
1 parent fa5c40f
commit 7af20be
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 38 deletions.
diff --git a/src/components/commons/teachers/Header.tsx b/src/components/commons/teachers/Header.tsx
@@ -1,15 +1,15 @@
-import { LogOut, User } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { PiBell, PiMagnifyingGlass } from 'react-icons/pi';
+import { SignedIn, UserButton, useClerk } from '@clerk/nextjs';
+import {
+	PiArrowCircleRightDuotone,
+	PiBell,
+	PiMagnifyingGlass,
+} from 'react-icons/pi';
 
+import MenuItem from '@/components/commons/MenuItem';
+import { Button } from '@/components/ui/button';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 
@@ -30,7 +30,11 @@ const getTimeOfDayGreeting = () => {
 
 export const Header: React.FC<HeaderProps> = ({ title }) => {
 	const greeting = getTimeOfDayGreeting();
+	const { signOut } = useClerk();
 
+	const menuItems = [
+		{ label: 'Sign Out', icon: PiArrowCircleRightDuotone, action: signOut },
+	];
 	return (
 		<header
 			className="flex flex-wrap gap-10 justify-between items-center px-40 py-6 bg-white max-md:px-5"
@@ -84,33 +88,32 @@ export const Header: React.FC<HeaderProps> = ({ title }) => {
 				</button>
 
 				{/* User Profile Dropdown */}
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Image
-							loading="lazy"
-							src="/app/lazyavt.png"
-							className="object-contain shrink-0 w-12 rounded-full aspect-square cursor-pointer"
-							alt="User Profile Picture"
-							width={48}
-							height={48}
-						/>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent className="w-36">
-						<DropdownMenuLabel>My Account</DropdownMenuLabel>
-						<DropdownMenuSeparator />
-						<DropdownMenuGroup>
-							<DropdownMenuItem>
-								<User />
-								<Link href="/teachers/profile">Profile</Link>
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem>
-							<LogOut />
-							<Link href="/">Log out</Link>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
+				<SignedIn>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="m-2 p-0">
+								<UserButton
+									appearance={{
+										elements: {
+											avatarBox:
+												'w-14 h-14 border border-orange-400 shadow-lg cursor-pointer',
+											userButtonPopoverCard:
+												'bg-white shadow-xl rounded-lg p-4',
+										},
+									}}
+								/>
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent
+							align="end"
+							className="bg-white shadow-lg rounded-lg p-2 mt-2"
+						>
+							{menuItems.map((item) => (
+								<MenuItem key={item.label} {...item} />
+							))}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</SignedIn>
 			</div>
 		</header>
 	);

diff --git a/src/components/teachers/dashboard/Banner.tsx b/src/components/teachers/dashboard/Banner.tsx
@@ -1,9 +1,14 @@
+'use client';
+
+import { useUser } from '@clerk/nextjs';
 import Image from 'next/image';
 import { PiArrowDown } from 'react-icons/pi';
 
 import { Progress } from '@/components/ui/progress';
 
 export const Banner = () => {
+	const { user } = useUser();
+	console.log('user data', user);
 	return (
 		<section
 			className="flex flex-col justify-center items-center p-10 bg-slate-900 max-md:px-5 mb-6"
@@ -13,18 +18,18 @@ export const Banner = () => {
 				<div className="flex gap-6 justify-center items-center self-stretch my-auto min-w-[240px]">
 					<Image
 						loading="lazy"
-						src="/app/lazyavt.png"
+						src={user?.imageUrl || '/app/lazyavt.png'}
 						alt="Profile avatar"
 						className="object-contain shrink-0 self-stretch my-auto w-20 aspect-square rounded-[40px]"
 						width={80}
 						height={80}
 					/>
 					<div className="flex flex-col self-stretch my-auto w-56">
 						<div className="text-xl font-semibold leading-tight text-white">
-							Lazy Code
+							{user?.fullName}
 						</div>
 						<div className="mt-1.5 text-sm tracking-normal leading-loose text-white opacity-50">
-							lazycode.dev@gmail.com
+							{user?.primaryEmailAddress?.emailAddress}
 						</div>
 					</div>
 				</div>