website refactor

apps/website/ui/ActivityItem.tsx

@@ -1,67 +1,44 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 import { Surface } from './primitives/Surface';
-import { Link } from './Link';
 
-interface ActivityItemProps {
-  title?: string;
+export interface ActivityItemProps {
+  title: string;
   description?: string;
-  timeAgo?: string;
-  color?: string;
-  headline?: string;
-  body?: string;
-  formattedTime?: string;
-  ctaHref?: string;
-  ctaLabel?: string;
+  timestamp: string;
+  icon?: ReactNode;
+  children?: ReactNode;
 }
 
-export function ActivityItem({ 
+export const ActivityItem = ({ 
   title, 
   description, 
-  timeAgo, 
-  color = 'bg-primary-blue',
-  headline,
-  body,
-  formattedTime,
-  ctaHref,
-  ctaLabel
-}: ActivityItemProps) {
+  timestamp, 
+  icon,
+  children 
+}: ActivityItemProps) => {
   return (
-    <Surface
-      variant="muted"
-      rounded="lg"
-      display="flex"
-      alignItems="start"
-      gap={3}
-      p={4}
-    >
-      <Box
-        w="2"
-        h="2"
-        mt={1.5}
-        rounded="full"
-        bg={color}
-        flexShrink={0}
-      />
-      <Box flex={1} minWidth={0}>
-        <Text color="text-white" weight="medium" block>
-          {title || headline}
-        </Text>
-        <Text size="sm" color="text-gray-400" block mt={0.5}>
-          {description || body}
-        </Text>
-        <Text size="xs" color="text-gray-500" block mt={2}>
-          {timeAgo || formattedTime}
-        </Text>
-        {ctaHref && ctaLabel && (
-          <Box mt={3}>
-            <Link href={ctaHref} size="xs" variant="primary">
-              {ctaLabel}
-            </Link>
+    <Surface variant="muted" rounded="lg" padding={4}>
+      <Box display="flex" alignItems="start" gap={4}>
+        {icon && (
+          <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+            {icon}
           </Box>
         )}
+        <Box flex={1}>
+          <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1}>
+            <Text weight="bold" variant="high">{title}</Text>
+            <Text size="xs" variant="low">{timestamp}</Text>
+          </Box>
+          {description && (
+            <Text size="sm" variant="low" marginBottom={children ? 4 : 0}>
+              {description}
+            </Text>
+          )}
+          {children}
+        </Box>
       </Box>
     </Surface>
   );
-}
+};