website refactor

apps/website/components/feed/ActivityFeedItem.tsx

@@ -0,0 +1,50 @@
+
+
+import { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface ActivityFeedItemProps {
+  icon: ReactNode;
+  content: ReactNode;
+  timestamp: string;
+}
+
+export function ActivityFeedItem({
+  icon,
+  content,
+  timestamp,
+}: ActivityFeedItemProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="start"
+      gap={3}
+      py={3}
+      borderBottom
+      style={{ borderColor: 'rgba(38, 38, 38, 0.3)' }}
+      className="last:border-0"
+    >
+      <Surface
+        variant="muted"
+        w="8"
+        h="8"
+        rounded="full"
+        display="flex"
+        center
+        flexShrink={0}
+      >
+        {icon}
+      </Surface>
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        <Text size="sm" leading="relaxed" block>
+          {content}
+        </Text>
+        <Text size="xs" color="text-gray-500" mt={1} block>
+          {timestamp}
+        </Text>
+      </Box>
+    </Box>
+  );
+}