added avatar varients and installation guide

Author: ariflogs

config/components.ts

@@ -20,6 +20,20 @@ export const componentConfig = {
       filePath: "preview/components/avatar-style-circle.tsx",
       preview: lazy(() => import("@/preview/components/avatar-style-circle")),
     },
+    "avatar-style-circle-fallbacks": {
+      name: "avatar-style-fallbacks",
+      filePath: "preview/components/avatar-style-circle-fallbacks.tsx",
+      preview: lazy(
+        () => import("@/preview/components/avatar-style-circle-fallbacks")
+      ),
+    },
+    "avatar-style-circle-sizes": {
+      name: "avatar-style-circle-sizes",
+      filePath: "preview/components/avatar-style-circle-sizes.tsx",
+      preview: lazy(
+        () => import("@/preview/components/avatar-style-circle-sizes")
+      ),
+    },
     "badge-style-default": {
       name: "badge-style-default",
       filePath: "preview/components/badge-style-default.tsx",

content/docs/components/avatar.mdx

@@ -27,6 +27,18 @@ npm install @radix-ui/react-avatar
 
 ## Examples
 
-### Circle
+### Size variants
 
-<ComponentShowcase name="avatar-style-circle" />
+<ComponentShowcase name="avatar-style-circle-sizes" />
+
+<br />
+<br />
+
+### Fallbacks
+
+Fallbacks are helpfull when there ia an error loading the src of the avatar.
+You can set fallbacks with `Avatar.Fallback` component.
+
+<br />
+
+<ComponentShowcase name="avatar-style-circle-fallbacks" />

packages/ui/Avatars/Avatar.tsx

@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary-400",
       className
     )}
     {...props}

preview/components/avatar-style-circle-fallbacks.tsx

@@ -0,0 +1,10 @@
+import { Avatar } from "@/packages/ui";
+
+export default function AvatarStyleFallback() {
+  return (
+    <Avatar>
+      <Avatar.Image src="broken-link" alt="Arif Logs" />
+      <Avatar.Fallback>AH</Avatar.Fallback>
+    </Avatar>
+  );
+}

preview/components/avatar-style-circle-sizes.tsx

@@ -0,0 +1,20 @@
+import { Avatar } from "@/packages/ui";
+
+export default function AvatarStyleCircle() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Avatar>
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+      <Avatar className="h-16 w-16">
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+      <Avatar className="h-20 w-20">
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+    </div>
+  );
+}

preview/components/avatar-style-circle.tsx

@@ -2,23 +2,9 @@ import { Avatar } from "@/packages/ui";
 
 export default function AvatarStyleCircle() {
   return (
-    <div className="flex items-center space-x-4">
-      <Avatar className="h-10 w-10">
-        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
-        <Avatar.Fallback>AH</Avatar.Fallback>
-      </Avatar>
-      <Avatar>
-        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
-        <Avatar.Fallback>AH</Avatar.Fallback>
-      </Avatar>
-      <Avatar className="h-16 w-16">
-        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
-        <Avatar.Fallback>AH</Avatar.Fallback>
-      </Avatar>
-      <Avatar className="h-20 w-20">
-        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
-        <Avatar.Fallback>AH</Avatar.Fallback>
-      </Avatar>
-    </div>
+    <Avatar>
+      <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+      <Avatar.Fallback>AH</Avatar.Fallback>
+    </Avatar>
   );
 }