From d443eabd69f3f4de7a980fc5635ab7026ab741f0 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sun, 21 Dec 2025 17:58:58 -0800
Subject: [PATCH] fix: Add missing avatar component, reduce venues API limit

- Create Avatar, AvatarImage, AvatarFallback components
- Fix venues page API limit (500 -> 100)
---
 frontend/app/venues/page.tsx      |  2 +-
 frontend/components/ui/avatar.tsx | 62 +++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/ui/avatar.tsx

diff --git a/frontend/app/venues/page.tsx b/frontend/app/venues/page.tsx
index 557bf98..60a7b16 100644
--- a/frontend/app/venues/page.tsx
+++ b/frontend/app/venues/page.tsx
@@ -30,7 +30,7 @@ export default function VenuesPage() {
         async function fetchVenues() {
             try {
                 // Fetch venues
-                const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=500`)
+                const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=100`)
                 const venuesData: Venue[] = await venuesRes.json()
 
                 // Fetch show counts for each venue (batch approach)
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 0000000..ade699f
--- /dev/null
+++ b/frontend/components/ui/avatar.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Avatar.displayName = "Avatar"
+
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> { }
+
+const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
+    ({ className, src, alt = "", ...props }, ref) => {
+        const [hasError, setHasError] = React.useState(false)
+
+        if (hasError || !src) {
+            return null
+        }
+
+        return (
+            <img
+                ref={ref}
+                src={src}
+                alt={alt}
+                onError={() => setHasError(true)}
+                className={cn("aspect-square h-full w-full object-cover", className)}
+                {...props}
+            />
+        )
+    }
+)
+AvatarImage.displayName = "AvatarImage"
+
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback }