53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|