fix(dashboard): Temporarily replace avatar component

When consuming the published package, the Avatar component from Radix UI causes
the following error which prevents the entire dashboard app from loading in the
browser:

https://github.com/radix-ui/primitives/issues/3489

packages/dashboard/src/lib/components/layout/nav-user.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/use-auth.js';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+// import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -64,10 +64,15 @@ export function NavUser() {
                                 size="lg"
                                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                             >
-                                <Avatar className="h-8 w-8 rounded-lg">
-                                    <AvatarImage src={user.id} alt={user.firstName} />
-                                    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>
-                                </Avatar>
+                                {/* Avatar component temporarily disabled due to https://github.com/radix-ui/primitives/issues/3489
+                                    error in published package version */}
+                                {/*<Avatar className="h-8 w-8 rounded-lg">*/}
+                                {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
+                                {/*    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>*/}
+                                {/*</Avatar>*/}
+                                <div className='relative flex rounded-lg border justify-center items-center w-8 h-8'>
+                                    {avatarFallback}
+                                </div>
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                     <span className="truncate font-semibold">
                                         {user.firstName} {user.lastName}
@@ -85,12 +90,12 @@ export function NavUser() {
                         >
                             <DropdownMenuLabel className="p-0 font-normal">
                                 <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                    <Avatar className="h-8 w-8 rounded-lg">
-                                        <AvatarImage src={user.id} alt={user.firstName} />
-                                        <AvatarFallback className="rounded-lg">
-                                            {avatarFallback}
-                                        </AvatarFallback>
-                                    </Avatar>
+                                    {/*<Avatar className="h-8 w-8 rounded-lg">*/}
+                                    {/*    <AvatarImage src={user.id} alt={user.firstName} />*/}
+                                    {/*    <AvatarFallback className="rounded-lg">*/}
+                                    {/*        {avatarFallback}*/}
+                                    {/*    </AvatarFallback>*/}
+                                    {/*</Avatar>*/}
                                     <div className="grid flex-1 text-left text-sm leading-tight">
                                         <span className="truncate font-semibold">
                                             {user.firstName} {user.lastName}

packages/dashboard/src/lib/components/ui/avatar.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-import { cn } from '@/lib/utils.js';
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-    return (
-        <AvatarPrimitive.Root
-            data-slot="avatar"
-            className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-            {...props}
-        />
-    );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-    return (
-        <AvatarPrimitive.Image
-            data-slot="avatar-image"
-            className={cn('aspect-square size-full', className)}
-            {...props}
-        />
-    );
-}
-
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-    return (
-        <AvatarPrimitive.Fallback
-            data-slot="avatar-fallback"
-            className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-            {...props}
-        />
-    );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };

packages/dashboard/src/lib/index.ts

@@ -74,7 +74,6 @@ export * from './components/shared/zone-selector.js';
 export * from './components/ui/accordion.js';
 export * from './components/ui/alert-dialog.js';
 export * from './components/ui/alert.js';
-export * from './components/ui/avatar.js';
 export * from './components/ui/badge.js';
 export * from './components/ui/breadcrumb.js';
 export * from './components/ui/button.js';