Updated realtime page.

src/components/common/Avatar.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useMemo } from 'react';
 import { createAvatar } from '@dicebear/core';
 import { lorelei } from '@dicebear/collection';
@@ -6,41 +5,17 @@ import { getColor, getPastel } from '@/lib/colors';
 
 const lib = lorelei;
 
-// ✅ Modern UTF-8 safe base64 encoder (no deprecated APIs)
-function toBase64(str: string): string {
-  if (typeof window === 'undefined') {
-    // Server (Node.js)
-    return Buffer.from(str, 'utf-8').toString('base64');
-  } else {
-    // Browser (UTF-8 safe)
-    const encoder = new TextEncoder();
-    const bytes = encoder.encode(str);
-    let binary = '';
-    const chunkSize = 0x8000;
-
-    for (let i = 0; i < bytes.length; i += chunkSize) {
-      const chunk = bytes.subarray(i, i + chunkSize);
-      binary += String.fromCharCode(...chunk);
-    }
-
-    return btoa(binary);
-  }
-}
-
 export function Avatar({ seed, size = 128, ...props }: { seed: string; size?: number }) {
   const backgroundColor = getPastel(getColor(seed), 4);
 
   const avatar = useMemo(() => {
-    const svg = createAvatar(lib, {
+    return createAvatar(lib, {
       ...props,
       seed,
       size,
       backgroundColor: [backgroundColor],
-    }).toString();
-
-    const base64 = toBase64(svg);
-    return `data:image/svg+xml;base64,${base64}`;
-  }, [seed, size, backgroundColor, props]);
+    }).toDataUri();
+  }, []);
 
   return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%', width: size }} />;
 }