website refactor

apps/website/ui/CategoryIcon.tsx

@@ -1,44 +1,29 @@
 import React from 'react';
 import { Box } from './primitives/Box';
-import { Image } from './Image';
-import { Tag } from 'lucide-react';
 import { Icon } from './Icon';
+import { Tag } from 'lucide-react';
 
 export interface CategoryIconProps {
-  categoryId?: string;
-  src?: string;
-  alt: string;
+  category: string;
   size?: number;
-  className?: string;
 }
 
-export function CategoryIcon({ 
-  categoryId, 
-  src, 
-  alt, 
-  size = 24, 
-  className = '',
-}: CategoryIconProps) {
-  const iconSrc = src || (categoryId ? `/media/categories/${categoryId}/icon` : undefined);
-
+export const CategoryIcon = ({ 
+  category, 
+  size = 24 
+}: CategoryIconProps) => {
+  // Map categories to icons if needed, for now just use Tag
   return (
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      className={className}
-      style={{ width: size, height: size, flexShrink: 0 }}
+    <Box 
+      width={size} 
+      height={size} 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ borderRadius: 'var(--ui-radius-sm)' }}
     >
-      {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" />
-      )}
+      <Icon icon={Tag} size={size > 20 ? 4 : 3} intent="low" />
     </Box>
   );
-}
+};