Testing avatar

src/app/chat/page.tsx

@@ -10,6 +10,7 @@ import auth, { makeAddress } from "@/lib/auth";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { toast } from "sonner";
+import ProfilePicture from "@/components/ProfilePicture";
 
 export default function Chat() {
   const ip = "localhost";
@@ -53,10 +54,7 @@ export default function Chat() {
 function DMItem({ name, status }: { name: string; status: string }) {
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
-      <Avatar className="h-8 w-8">
+      <ProfilePicture name={name} />
-        <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
-        <AvatarFallback>{name[0]}</AvatarFallback>
-      </Avatar>
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>

src/components/MessageBox.tsx

@@ -19,6 +19,7 @@ import { NumberMap, StringMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
 import axios from "axios";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import ProfilePicture from "./ProfilePicture";
 
 function MessageContainer({
   message,
@@ -42,17 +43,13 @@ function MessageContainer({
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
         {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
-        <Avatar className="h-8 w-8">
+        <ProfilePicture
-          <AvatarImage
+          name={String(
-            src="https://github.com/kleo-dev.png"
+            userList[message.from]
-            alt={message.from.toString()}
-          />
-          <AvatarFallback>
-            {userList[message.from]
               ? userList[message.from].username
-              : message.from}
+              : message.from
-          </AvatarFallback>
+          )}
-        </Avatar>
+        />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {userList[message.from]

src/components/ProfilePicture.tsx

@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+
+export default function ProfilePicture({ name }: { name: string }) {
+  return (
+    <Avatar className="h-8 w-8">
+      <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
+      <AvatarFallback>{name[0]}</AvatarFallback>
+    </Avatar>
+  );
+}

src/components/Sidebar.tsx

@@ -32,6 +32,7 @@ import Channel from "@/types/channel";
 import Link from "next/link";
 import { NumberMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
+import ProfilePicture from "./ProfilePicture";
 
 export default function AppSidebar({
   user,
@@ -204,10 +205,7 @@ export default function AppSidebar({
 function DMItem({ name, status }: { name: string; status: string }) {
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
-      <Avatar className="h-8 w-8">
+      <ProfilePicture name={name} />
-        <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
-        <AvatarFallback>{name[0]}</AvatarFallback>
-      </Avatar>
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>