website refactor

apps/website/ui/CategoryIcon.tsx

@@ -1,27 +1,44 @@
-/**
- * CategoryIcon
- *
- * Pure UI component for displaying category icons.
- * Renders an image with fallback on error.
- */
+import React from 'react';
+import { Box } from './Box';
+import { Image } from './Image';
+import { Tag } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface CategoryIconProps {
-  categoryId: string;
+  categoryId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
 }
 
-export function CategoryIcon({ categoryId, alt, className = '' }: CategoryIconProps) {
+export function CategoryIcon({ 
+  categoryId, 
+  src, 
+  alt, 
+  size = 24, 
+  className = '',
+}: CategoryIconProps) {
+  const iconSrc = src || (categoryId ? `/media/categories/${categoryId}/icon` : undefined);
+
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={`/media/categories/${categoryId}/icon`}
-      alt={alt}
-      className={`w-6 h-6 object-contain ${className}`}
-      onError={(e) => {
-        // Fallback to default icon
-        (e.target as HTMLImageElement).src = '/default-category-icon.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {iconSrc ? (
+        <Image
+          src={iconSrc}
+          alt={alt}
+          className="w-full h-full object-contain"
+          fallbackSrc="/default-category-icon.png"
+        />
+      ) : (
+        <Icon icon={Tag} size={size > 20 ? 4 : 3} color="text-gray-500" />
+      )}
+    </Box>
   );
-}
+}