62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Activity } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { SectionHeader } from '@/ui/SectionHeader';
|
|
import { ActivityItem } from '@/ui/ActivityItem';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import { Button } from '@/ui/Button';
|
|
|
|
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>
|
|
<SectionHeader
|
|
title="Recent Activity"
|
|
variant="minimal"
|
|
actions={<Icon icon={Activity} size={5} intent="primary" />}
|
|
/>
|
|
{hasItems ? (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
{items.slice(0, 5).map((item) => (
|
|
<ActivityItem
|
|
key={item.id}
|
|
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>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
icon={Activity}
|
|
title="No activity yet"
|
|
description="Join leagues and add friends to see activity here"
|
|
variant="minimal"
|
|
/>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|