Merge pull request #17 from hubcio2115/fix/profile-picture-fallback

Fix/profile picture fallback
hubcio2115 · Nov 3, 2023 · b20a380 · b20a380
2 parents e547def + 6427d36
commit b20a380
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/profile.tsx b/src/components/profile.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 import type { Session } from "next-auth";
 
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+
 interface ProfileProps {
   session: Session;
 }
@@ -11,7 +12,10 @@ function getInitials(name: string) {
   const firstName = name.split(" ")[0];
   const lastName = name.split(" ")[1];
 
-  return `${firstName?.at(0)}${lastName?.at(0)}`;
+  // If username is somehow all blank
+  if (!firstName && !lastName) return "You";
+
+  return `${firstName?.at(0) ?? ""}${lastName?.at(0) ?? ""}`;
 }
 
 export default function Profile({ session }: ProfileProps) {
@@ -20,10 +24,9 @@ export default function Profile({ session }: ProfileProps) {
       <AvatarImage
         // eslint-disable-next-line
         src={session.user.image!}
-        className="h-10 w-10 rounded-full"
         alt="profile picture"
       />
-      <AvatarFallback>
+      <AvatarFallback className="bg-white transition-colors hover:bg-accent hover:text-accent-foreground">
         {session.user.name ? getInitials(session.user.name) : ""}
       </AvatarFallback>
     </Avatar>

diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -43,7 +43,7 @@ const AvatarFallback = forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full",
       className,
     )}
     {...props}