More stuff

src/components/ui/based-avatar.tsx

@@ -1,24 +1,26 @@
 'use client';
-import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { User } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { AvatarImage } from '@/components/ui/avatar';
+import { type ComponentProps } from 'react';
 
-type BasedAvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & {
+type BasedAvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
   src?: string | null;
   fullName?: string | null;
-  imageClassName?: string;
-  fallbackClassName?: string;
-  userIconSize?: number;
+  imageProps?: Omit<ComponentProps<typeof AvatarImage>, 'data-slot'>;
+  fallbackProps?: ComponentProps<typeof AvatarPrimitive.Fallback>;
+  userIconProps?: ComponentProps<typeof User>;
 };
 
 const BasedAvatar = ({
   src = null,
   fullName = null,
-  imageClassName = '',
-  fallbackClassName = '',
-  userIconSize = 32,
+  imageProps,
+  fallbackProps,
+  userIconProps = {
+    size: 32,
+  },
   className,
   ...props
 }: BasedAvatarProps) => {
@@ -32,13 +34,14 @@ const BasedAvatar = ({
       {...props}
     >
       {src ? (
-        <AvatarImage src={src} className={imageClassName} />
+        <AvatarImage {...imageProps} src={src} className={imageProps?.className} />
       ) : (
         <AvatarPrimitive.Fallback
+          {...fallbackProps}
           data-slot='avatar-fallback'
           className={cn(
             'bg-muted flex size-full items-center justify-center rounded-full',
-            fallbackClassName,
+            fallbackProps?.className,
           )}
         >
           {fullName ? (
@@ -48,7 +51,7 @@ const BasedAvatar = ({
               .join('')
               .toUpperCase()
           ) : (
-            <User size={userIconSize} />
+            <User {...userIconProps} className={cn('', userIconProps?.className)} />
           )}
         </AvatarPrimitive.Fallback>
       )}