63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Activity } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
|
|
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>
|
|
<Stack gap={4}>
|
|
<Heading level={2} icon={<Activity style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
|
|
Recent Activity
|
|
</Heading>
|
|
{hasItems ? (
|
|
<Stack gap={4}>
|
|
{items.slice(0, 5).map((item) => (
|
|
<Box key={item.id} style={{ display: 'flex', alignItems: 'start', gap: '0.75rem', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
|
|
<Box style={{ flex: 1 }}>
|
|
<Text color="text-white" weight="medium" block>{item.headline}</Text>
|
|
{item.body && <Text size="sm" color="text-gray-400" block mt={1}>{item.body}</Text>}
|
|
<Text size="xs" color="text-gray-500" block mt={1}>{item.formattedTime}</Text>
|
|
</Box>
|
|
{item.ctaHref && item.ctaLabel && (
|
|
<Box>
|
|
<Link href={item.ctaHref} variant="primary">
|
|
<Text size="xs">{item.ctaLabel}</Text>
|
|
</Link>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Stack align="center" gap={2} py={8}>
|
|
<Activity style={{ width: '2.5rem', height: '2.5rem', color: '#525252' }} />
|
|
<Text color="text-gray-400">No activity yet</Text>
|
|
<Text size="sm" color="text-gray-500">Join leagues and add friends to see activity here</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|