website refactor

apps/website/ui/FeedItem.tsx

@@ -1,77 +1,46 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
-import { Image } from './Image';
+import { Surface } from './primitives/Surface';
+import { Avatar } from './Avatar';
 
-interface FeedItemProps {
-  actorName?: string;
-  actorAvatarUrl?: string;
-  typeLabel: string;
-  headline: string;
-  body?: string;
-  timeAgo: string;
-  cta?: ReactNode;
+export interface FeedItemProps {
+  user: {
+    name: string;
+    avatar?: string;
+  };
+  content: ReactNode;
+  timestamp: string;
+  actions?: ReactNode;
 }
 
-export function FeedItem({
-  actorName,
-  actorAvatarUrl,
-  typeLabel,
-  headline,
-  body,
-  timeAgo,
-  cta,
-}: FeedItemProps) {
+export const FeedItem = ({ 
+  user, 
+  content, 
+  timestamp, 
+  actions 
+}: FeedItemProps) => {
   return (
-    <Box display="flex" gap={4}>
-      <Box flexShrink={0}>
-        {actorAvatarUrl ? (
-          <Box width="10" height="10" rounded="full" overflow="hidden" bg="bg-charcoal-outline">
-            <Image
-              src={actorAvatarUrl}
-              alt={actorName || ''}
-              width={40}
-              height={40}
-              fullWidth
-              fullHeight
-              objectFit="cover"
-            />
+    <Surface variant="default" rounded="lg" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
+      <Box display="flex" alignItems="start" gap={4}>
+        <Avatar src={user.avatar} alt={user.name} size="md" />
+        <Box flex={1}>
+          <Box display="flex" alignItems="center" justifyContent="between" marginBottom={2}>
+            <Text weight="bold" variant="high">{user.name}</Text>
+            <Text size="xs" variant="low">{timestamp}</Text>
           </Box>
-        ) : (
-          <Box 
-            width="10" 
-            height="10" 
-            display="flex" 
-            center 
-            rounded="full" 
-            bg="bg-primary-blue/10" 
-            border={true} 
-            borderColor="border-primary-blue/40"
-          >
-            <Text size="xs" color="text-primary-blue" weight="semibold">
-              {typeLabel}
-            </Text>
+          <Box marginBottom={4}>
+            {typeof content === 'string' ? (
+              <Text variant="med">{content}</Text>
+            ) : content}
           </Box>
-        )}
-      </Box>
-      <Box flexGrow={1} minWidth="0">
-        <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
-          <Box>
-            <Text size="sm" color="text-white" block>{headline}</Text>
-            {body && (
-              <Text size="xs" color="text-gray-400" block mt={1}>{body}</Text>
-            )}
-          </Box>
-          <Text size="xs" color="text-gray-500" className="whitespace-nowrap" style={{ fontSize: '11px' }}>
-            {timeAgo}
-          </Text>
+          {actions && (
+            <Box display="flex" alignItems="center" gap={4} borderTop paddingTop={4}>
+              {actions}
+            </Box>
+          )}
         </Box>
-        {cta && (
-          <Box mt={3}>
-            {cta}
-          </Box>
-        )}
       </Box>
-    </Box>
+    </Surface>
   );
-}
+};