website refactor

apps/website/ui/ActivityItem.tsx

@@ -1,66 +1,67 @@
-
-
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Link } from './Link';
 import { Text } from './Text';
 import { Surface } from './primitives/Surface';
+import { Link } from './Link';
 
 interface ActivityItemProps {
-  headline: string;
+  title?: string;
+  description?: string;
+  timeAgo?: string;
+  color?: string;
+  headline?: string;
   body?: string;
-  formattedTime: string;
+  formattedTime?: string;
   ctaHref?: string;
   ctaLabel?: string;
-  typeColor?: string;
 }
 
-export function ActivityItem({
+export function ActivityItem({ 
+  title, 
+  description, 
+  timeAgo, 
+  color = 'bg-primary-blue',
   headline,
   body,
   formattedTime,
   ctaHref,
-  ctaLabel,
-  typeColor,
+  ctaLabel
 }: ActivityItemProps) {
   return (
     <Surface
       variant="muted"
-      padding={3}
       rounded="lg"
-      style={{ display: 'flex', alignItems: 'start', gap: '0.75rem' }}
+      display="flex"
+      alignItems="start"
+      gap={3}
+      p={4}
     >
-      {typeColor && (
-        <Box
-          style={{
-            width: '0.5rem',
-            height: '0.5rem',
-            borderRadius: '9999px',
-            marginTop: '0.5rem',
-            backgroundColor: typeColor,
-            flexShrink: 0,
-          }}
-        />
-      )}
-      <Box style={{ flex: 1, minWidth: 0 }}>
+      <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>
-          {headline}
+          {title || headline}
         </Text>
-        {body && (
-          <Text size="sm" color="text-gray-400" block mt={1}>
-            {body}
-          </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>
+          </Box>
         )}
-        <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>
   );
 }