From 6a26bff3cd1fd73d33c899475c9c7ded6411b568 Mon Sep 17 00:00:00 2001
From: Bob Burningham <bob@all-tech.services>
Date: Sat, 14 Oct 2023 21:03:42 -0700
Subject: [PATCH] added UserAvatar

---
 components/ui/avatar.tsx   | 50 ++++++++++++++++++++++++++++++++++++++
 components/user-avatar.tsx | 18 ++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 components/ui/avatar.tsx
 create mode 100644 components/user-avatar.tsx

diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/user-avatar.tsx b/components/user-avatar.tsx
new file mode 100644
index 0000000..4608463
--- /dev/null
+++ b/components/user-avatar.tsx
@@ -0,0 +1,18 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import { cn } from "@/lib/utils";
+
+interface UserAvatarProps {
+    src?: string;
+    className?: string;
+}
+
+export const UserAvatar = ({
+    src,
+    className
+}: UserAvatarProps) => {
+    return (
+        <Avatar className={cn("h-7 w-7 md:h-10 md:w-10", className)}>
+            <AvatarImage src={src} />
+        </Avatar>
+    )
+}
\ No newline at end of file