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">
-        <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
-        <AvatarFallback>{name[0]}</AvatarFallback>
-      </Avatar>
+      <ProfilePicture name={name} />
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>