website refactor

apps/website/ui/SponsorActivityItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface SponsorActivityItemProps {
+  message: string;
+  time: string;
+  typeColor: string;
+  formattedImpressions?: string | null;
+}
+
+export function SponsorActivityItem({
+  message,
+  time,
+  typeColor,
+  formattedImpressions,
+}: SponsorActivityItemProps) {
+  return (
+    <Stack direction="row" align="start" gap={3} py={3} borderBottom={true} borderColor="border-charcoal-outline/50">
+      <Box width="2" height="2" rounded="full" mt={2} className={typeColor} flexShrink={0} />
+      <Box flexGrow={1} minWidth="0">
+        <Text size="sm" color="text-white" block truncate>{message}</Text>
+        <Stack direction="row" align="center" gap={2} mt={1}>
+          <Text size="xs" color="text-gray-500">{time}</Text>
+          {formattedImpressions && (
+            <>
+              <Text size="xs" color="text-gray-600">•</Text>
+              <Text size="xs" color="text-gray-400">{formattedImpressions} views</Text>
+            </>
+          )}
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}