website refactor

apps/website/components/feed/ActivityFeedItem.tsx

@@ -1,9 +1,7 @@
+'use client';
 
-
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
-import { Text } from '@/ui/Text';
-import { ReactNode } from 'react';
+import { ActivityItem } from '@/ui/ActivityItem';
+import React, { ReactNode } from 'react';
 
 interface ActivityFeedItemProps {
   icon: ReactNode;
@@ -17,34 +15,13 @@ export function ActivityFeedItem({
   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"
+    <ActivityItem
+      title=""
+      description={typeof content === 'string' ? content : undefined}
+      timestamp={timestamp}
+      icon={icon}
     >
-      <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>
+      {typeof content !== 'string' && content}
+    </ActivityItem>
   );
 }