website refactor

apps/website/ui/FeedItem.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+import Image from 'next/image';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Card } from './Card';
+
+interface FeedItemProps {
+  actorName?: string;
+  actorAvatarUrl?: string;
+  typeLabel: string;
+  headline: string;
+  body?: string;
+  timeAgo: string;
+  cta?: ReactNode;
+}
+
+export function FeedItem({
+  actorName,
+  actorAvatarUrl,
+  typeLabel,
+  headline,
+  body,
+  timeAgo,
+  cta,
+}: 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}
+              className="w-full h-full object-cover"
+            />
+          </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>
+        )}
+      </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>
+        </Box>
+        {cta && (
+          <Box mt={3}>
+            {cta}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}