website refactor

apps/website/components/feed/FeedItemCard.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@/ui/Button';
 import { FeedItem } from '@/ui/FeedItem';
+import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
 
 interface FeedItemData {
   id: string;
@@ -15,18 +16,6 @@ interface FeedItemData {
   ctaLabel?: string;
 }
 
-function timeAgo(timestamp: Date | string): string {
-  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
-  const diffMs = Date.now() - date.getTime();
-  const diffMinutes = Math.floor(diffMs / 60000);
-  if (diffMinutes < 1) return 'Just now';
-  if (diffMinutes < 60) return `${diffMinutes} min ago`;
-  const diffHours = Math.floor(diffMinutes / 60);
-  if (diffHours < 24) return `${diffHours} h ago`;
-  const diffDays = Math.floor(diffHours / 24);
-  return `${diffDays} d ago`;
-}
-
 async function resolveActor() {
   return null;
 }
@@ -55,20 +44,23 @@ export function FeedItemCard({ item }: FeedItemCardProps) {
 
   return (
     <FeedItem
-      actorName={actor?.name}
-      actorAvatarUrl={actor?.avatarUrl}
-      typeLabel={item.type.startsWith('friend') ? 'FR' : 'LG'}
-      headline={item.headline}
-      body={item.body}
-      timeAgo={timeAgo(item.timestamp)}
-      cta={item.ctaHref && item.ctaLabel ? (
+      user={{
+        name: actor?.name || 'Unknown',
+        avatar: actor?.avatarUrl
+      }}
+      timestamp={TimeDisplay.timeAgo(item.timestamp)}
+      content={
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <div style={{ fontWeight: 'bold' }}>{item.headline}</div>
+          {item.body && <div>{item.body}</div>}
+        </div>
+      }
+      actions={item.ctaHref && item.ctaLabel ? (
         <Button
           as="a"
           href={item.ctaHref}
           variant="secondary"
           size="sm"
-          px={4}
-          py={2}
         >
           {item.ctaLabel}
         </Button>