website refactor

apps/website/components/sponsors/SponsorActivityPanel.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Box, BoxProps } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon, Clock } from 'lucide-react';
+
+export interface Activity {
+  id: string;
+  type: 'sponsorship_approved' | 'payment_received' | 'new_opportunity' | 'contract_expiring';
+  title: string;
+  description: string;
+  timestamp: string;
+  icon: LucideIcon;
+  color: string;
+}
+
+interface SponsorActivityPanelProps {
+  activities: Activity[];
+}
+
+/**
+ * SponsorActivityPanel
+ * 
+ * A semantic component for displaying a feed of sponsor activities.
+ * Dense, chronological list.
+ */
+export function SponsorActivityPanel({ activities }: SponsorActivityPanelProps) {
+  return (
+    <Box>
+      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
+        Recent Activity
+      </Heading>
+      <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
+        {activities.length === 0 ? (
+          <Box p={8} textAlign="center">
+            <Icon icon={Clock} size={8} color="text-gray-600" className="mx-auto mb-3" />
+            <Text color="text-gray-500">No recent activity to show.</Text>
+          </Box>
+        ) : (
+          <Box>
+            {activities.map((activity, index) => (
+              <Box 
+                key={activity.id} 
+                p={4} 
+                display="flex" 
+                gap={4}
+                borderBottom={index !== activities.length - 1}
+                borderColor="border-charcoal-outline/30"
+                hoverBg="bg-iron-gray/20"
+                transition-colors
+              >
+                <Box 
+                  w="10" 
+                  h="10" 
+                  rounded="lg" 
+                  display="flex" 
+                  alignItems="center" 
+                  justifyContent="center"
+                  bg={activity.color.replace('text-', 'bg-').concat('/10') as BoxProps<'div'>['bg']}
+                >
+                  <Icon icon={activity.icon} size={5} color={activity.color as any} />
+                </Box>
+                <Box flexGrow={1}>
+                  <Box display="flex" alignItems="center" justifyContent="between" mb={0.5}>
+                    <Text weight="medium" color="text-white">{activity.title}</Text>
+                    <Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
+                  </Box>
+                  <Text size="sm" color="text-gray-400">{activity.description}</Text>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}