website refactor

apps/website/components/feed/ActivityFeed.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Activity } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { ActivityItem } from '@/ui/ActivityItem';
+import { Icon } from '@/ui/Icon';
+import { ActivityFeedList } from '@/components/feed/ActivityFeedList';
+import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+
+interface FeedItem {
+  id: string;
+  headline: string;
+  body?: string;
+  formattedTime: string;
+  ctaHref?: string;
+  ctaLabel?: string;
+}
+
+interface ActivityFeedProps {
+  items: FeedItem[];
+  hasItems: boolean;
+}
+
+export function ActivityFeed({ items, hasItems }: ActivityFeedProps) {
+  return (
+    <Card>
+      <Heading level={2} icon={<Icon icon={Activity} size={5} color="var(--primary-blue)" />} mb={4}>
+        Recent Activity
+      </Heading>
+      {hasItems ? (
+        <ActivityFeedList>
+          {items.slice(0, 5).map((item) => (
+            <ActivityItem
+              key={item.id}
+              headline={item.headline}
+              body={item.body}
+              formattedTime={item.formattedTime}
+              ctaHref={item.ctaHref}
+              ctaLabel={item.ctaLabel}
+            />
+          ))}
+        </ActivityFeedList>
+      ) : (
+        <MinimalEmptyState
+          icon={Activity}
+          title="No activity yet"
+          description="Join leagues and add friends to see activity here"
+        />
+      )}
+    </Card>
+  );
+}