Avatar doesn't show Background or Color

[felixstrmr]

Trying to use the Component in a fresh Next JS project getting the result below. Text + Icons are showing but background and colors are missing.

Code:

Result:

[nusu]

Looks like it's happening due to server components, Goober has no support for it so we need to revert it back to something else. I'll look at what I can do.

[alejandro0619]

Trying to use the Component in a fresh Next JS project getting the result below. Text + Icons are showing but background and colors are missing.

Code:

Result:

One thing that helped me to sort this out was to create a client componente such as

"use client";

import Avvvatars from "avvvatars-react";

export default function Avatar({ placeholder }: { placeholder: string }) {
  return (
    <Avvvatars
      value={placeholder}
      size={64}
      style="character"
      radius={50}
      border
      borderSize={3}
    />
  );
}

Then used this in my page.tsx

import { redirect } from "next/navigation"

import { createClient } from "@/utils/supabase/server"
import Avatar from "@/components/Avatar";

export default async function HomePage() {
  const supabase = await createClient();

  const { data, error } = await supabase.auth.getUser();
  if (error || !data?.user) {
    redirect("/login");
  }
  return (
    <main className="h-screen w-screen z-10">
    <nav className="fixed z-20 top-0 h-[100px] w-full flex justify-center items-center bg-black shadow-md text-white">
      Bienvenido...
     <Avatar
     placeholder={data.user.email || data.user.user_metadata.name || 'User'}> 

     </Avatar>
    </nav>
  </main>
  );
}

[nusu]

That works, still I'm going to remove goober because it's unnecessary at the moment. and I'm going to expose a class in case people want to manipulate from outside, at the moment it's quite hacky to achieve that.