Merge pull request #29 from FaithMosonik/main

Add CustomAvatar component

src/app/dashboard/ProfileHeader.tsx

@@ -11,6 +11,8 @@ const ProfileHeader = () => {
 	return (
 		<Header
 			avatarUrl={profile?.profile_picture}
+			firstName={profile?.first_name}
+			lastName={profile?.last_name}
 			handleLogoutClick={handleLogout}
 			handleEditClick={() => {
 				router.push("/dashboard/my-profile/edit");

src/components/header.tsx

@@ -18,16 +18,19 @@ import {
 import { Input } from "@/components/ui/input"
 import SidebarNav from '@/components/sidebarNav'
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import CustomAvatar from './ui/custom-avatar'
 
 interface headerProps {
 
   avatarUrl?: string;
+  firstName?: string;
+  lastName?: string;
   handleLogoutClick?: () => void;
   handleEditClick?: () => void;
 
 }
 
-const Header = ({ avatarUrl ,handleLogoutClick, handleEditClick } : headerProps ) => {
+const Header = ({ avatarUrl, firstName, lastName ,handleLogoutClick, handleEditClick } : headerProps ) => {
   return (
     <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
       <Sheet>
@@ -59,10 +62,7 @@ const Header = ({ avatarUrl ,handleLogoutClick, handleEditClick } : headerProps
       </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Avatar>
-            <AvatarImage src={avatarUrl} alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
+        <CustomAvatar image_url={avatarUrl} first_name={firstName} last_name={lastName}></CustomAvatar>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
           <DropdownMenuLabel>My Account</DropdownMenuLabel>

src/components/ui/custom-avatar.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { get_fallback_name } from "@/lib/utils";
+
+type CustomAvatarProps = {
+  className?: string;
+  image_url?: string;
+  first_name?: string;
+  last_name?: string;
+};
+const CustomAvatar = ({
+  className,
+  image_url,
+  first_name,
+  last_name,
+}: CustomAvatarProps) => {
+  return (
+    <Avatar className={cn("h-12 w-12", className)}>
+      <AvatarImage src={image_url} />
+      <AvatarFallback className="p-2">
+        {get_fallback_name(first_name, last_name)}
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+export default CustomAvatar;

src/components/ui/projectcard.tsx

@@ -68,6 +68,7 @@ import {
 } from "@/redux/features/innovations/innovationsApiSlice";
 import { extractIdFromUrl } from "@/utils/ExtractIdFromUrl";
 import { useRouter } from "next/navigation";
+import CustomAvatar from "./custom-avatar";
 
 
 // * interface for project card props
@@ -188,10 +189,7 @@ const ProjectCard = ({
 		<Card className="max-w-[500px]">
 			<div className="p-0 mx-6 flex justify-between items-center">
 				<div className="flex items-center gap-2 mt-2">
-					<Avatar>
-						<AvatarImage src={author_avator_image_url} alt="@shadcn" />
-						<AvatarFallback>CN</AvatarFallback>
-					</Avatar>
+					<CustomAvatar image_url={author_avator_image_url} first_name={author_first_name} last_name={author_last_name}></CustomAvatar>
 					<Link href="/dashboard">
 						{author_first_name} {author_last_name}
 					</Link>