website refactor

apps/website/components/feed/FeedItemCard.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
-import Image from 'next/image';
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Button } from '@/ui/Button';
+import { FeedItem } from '@/ui/FeedItem';
 
 interface FeedItemData {
   id: string;
@@ -26,9 +27,7 @@ function timeAgo(timestamp: Date | string): string {
   return `${diffDays} d ago`;
 }
 
-async function resolveActor(_item: FeedItemData) {
-  // Actor resolution is not wired through the API in this build.
-  // Keep rendering deterministic and decoupled (no core repos).
+async function resolveActor() {
   return null;
 }
 
@@ -36,14 +35,14 @@ interface FeedItemCardProps {
   item: FeedItemData;
 }
 
-export default function FeedItemCard({ item }: FeedItemCardProps) {
+export function FeedItemCard({ item }: FeedItemCardProps) {
   const [actor, setActor] = useState<{ name: string; avatarUrl: string } | null>(null);
 
   useEffect(() => {
     let cancelled = false;
 
     void (async () => {
-      const resolved = await resolveActor(item);
+      const resolved = await resolveActor();
       if (!cancelled) {
         setActor(resolved);
       }
@@ -55,51 +54,25 @@ export default function FeedItemCard({ item }: FeedItemCardProps) {
   }, [item]);
 
   return (
-    <div className="flex gap-4">
-      <div className="flex-shrink-0">
-        {actor ? (
-          <div className="w-10 h-10 rounded-full overflow-hidden bg-charcoal-outline">
-            <Image
-              src={actor.avatarUrl}
-              alt={actor.name}
-              width={40}
-              height={40}
-              className="w-full h-full object-cover"
-            />
-          </div>
-        ) : (
-          <Card className="w-10 h-10 flex items-center justify-center rounded-full bg-primary-blue/10 border-primary-blue/40 p-0">
-            <span className="text-xs text-primary-blue font-semibold">
-              {item.type.startsWith('friend') ? 'FR' : 'LG'}
-            </span>
-          </Card>
-        )}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <div>
-            <p className="text-sm text-white">{item.headline}</p>
-            {item.body && (
-              <p className="text-xs text-gray-400 mt-1">{item.body}</p>
-            )}
-          </div>
-          <span className="text-[11px] text-gray-500 whitespace-nowrap">
-            {timeAgo(item.timestamp)}
-          </span>
-        </div>
-        {item.ctaHref && item.ctaLabel && (
-          <div className="mt-3">
-            <Button
-              as="a"
-              href={item.ctaHref}
-              variant="secondary"
-              className="text-xs px-4 py-2"
-            >
-              {item.ctaLabel}
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
+    <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 ? (
+        <Button
+          as="a"
+          href={item.ctaHref}
+          variant="secondary"
+          size="sm"
+          px={4}
+          py={2}
+        >
+          {item.ctaLabel}
+        </Button>
+      ) : undefined}
+    />
   );
-}
+}