Rewrote turborepo. Hopefully this is a bit more clean & easy to understand for me.

packages/ui/src/based-avatar.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { type ComponentProps } from "react";
+import { AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { User } from "lucide-react";
+
+type BasedAvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
+  src?: string | null;
+  fullName?: string | null;
+  imageProps?: Omit<ComponentProps<typeof AvatarImage>, "data-slot">;
+  fallbackProps?: ComponentProps<typeof AvatarPrimitive.Fallback>;
+  userIconProps?: ComponentProps<typeof User>;
+};
+
+const BasedAvatar = ({
+  src = null,
+  fullName = null,
+  imageProps,
+  fallbackProps,
+  userIconProps = {
+    size: 32,
+  },
+  className,
+  ...props
+}: BasedAvatarProps) => {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 cursor-pointer overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    >
+      {src ? (
+        <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",
+            fallbackProps?.className,
+          )}
+        >
+          {fullName ? (
+            fullName
+              .split(" ")
+              .map((n) => n[0])
+              .join("")
+              .toUpperCase()
+          ) : (
+            <User
+              {...userIconProps}
+              className={cn("", userIconProps?.className)}
+            />
+          )}
+        </AvatarPrimitive.Fallback>
+      )}
+    </AvatarPrimitive.Root>
+  );
+};
+
+export { BasedAvatar };