website refactor

apps/website/components/teams/TeamLogo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Users } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+
+export interface TeamLogoProps {
+  teamId?: string;
+  src?: string;
+  alt: string;
+  size?: number;
+  className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export function TeamLogo({ 
+  teamId, 
+  src, 
+  alt, 
+  size = 48, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: TeamLogoProps) {
+  const logoSrc = src || (teamId ? `/media/teams/${teamId}/logo` : undefined);
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <Image
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackSrc="/default-team-logo.png"
+        />
+      ) : (
+        <Icon icon={Users} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
+  );
+}