website refactor

apps/website/ui/ActivityItem.tsx

@@ -0,0 +1,65 @@
+
+
+import { Box } from './Box';
+import { Link } from './Link';
+import { Text } from './Text';
+
+interface ActivityItemProps {
+  headline: string;
+  body?: string;
+  formattedTime: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+  typeColor?: string;
+}
+
+export function ActivityItem({
+  headline,
+  body,
+  formattedTime,
+  ctaHref,
+  ctaLabel,
+  typeColor,
+}: ActivityItemProps) {
+  return (
+    <Surface
+      variant="muted"
+      padding={3}
+      rounded="lg"
+      style={{ display: 'flex', alignItems: 'start', gap: '0.75rem' }}
+    >
+      {typeColor && (
+        <Box
+          style={{
+            width: '0.5rem',
+            height: '0.5rem',
+            borderRadius: '9999px',
+            marginTop: '0.5rem',
+            backgroundColor: typeColor,
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        <Text color="text-white" weight="medium" block>
+          {headline}
+        </Text>
+        {body && (
+          <Text size="sm" color="text-gray-400" block mt={1}>
+            {body}
+          </Text>
+        )}
+        <Text size="xs" color="text-gray-500" block mt={1}>
+          {formattedTime}
+        </Text>
+      </Box>
+      {ctaHref && ctaLabel && (
+        <Box>
+          <Link href={ctaHref} variant="primary">
+            <Text size="xs">{ctaLabel}</Text>
+          </Link>
+        </Box>
+      )}
+    </Surface>
+  );
+}