website refactor

apps/website/components/feed/ActivityFeed.tsx

@@ -1,11 +1,13 @@
+'use client';
+
 import React from 'react';
 import { Activity } from 'lucide-react';
 import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
+import { SectionHeader } from '@/ui/SectionHeader';
 import { ActivityItem } from '@/ui/ActivityItem';
 import { Icon } from '@/ui/Icon';
-import { ActivityFeedList } from '@/components/feed/ActivityFeedList';
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
+import { Button } from '@/ui/Button';
 
 interface FeedItem {
   id: string;
@@ -24,27 +26,34 @@ interface ActivityFeedProps {
 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>
+      <SectionHeader
+        title="Recent Activity"
+        variant="minimal"
+        actions={<Icon icon={Activity} size={5} intent="primary" />}
+      />
       {hasItems ? (
-        <ActivityFeedList>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
           {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}
-            />
+              title={item.headline}
+              description={item.body}
+              timestamp={item.formattedTime}
+            >
+              {item.ctaHref && item.ctaLabel && (
+                <Button variant="ghost" size="sm" as="a" href={item.ctaHref}>
+                  {item.ctaLabel}
+                </Button>
+              )}
+            </ActivityItem>
           ))}
-        </ActivityFeedList>
+        </div>
       ) : (
-        <MinimalEmptyState
+        <EmptyState
           icon={Activity}
           title="No activity yet"
           description="Join leagues and add friends to see activity here"
+          variant="minimal"
         />
       )}
     </Card>