76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Clock, LucideIcon } from 'lucide-react';
|
|
|
|
export interface Activity {
|
|
id: string;
|
|
type: 'sponsorship_approved' | 'payment_received' | 'new_opportunity' | 'contract_expiring';
|
|
title: string;
|
|
description: string;
|
|
timestamp: string;
|
|
icon: LucideIcon;
|
|
color: string;
|
|
}
|
|
|
|
interface SponsorActivityPanelProps {
|
|
activities: Activity[];
|
|
}
|
|
|
|
/**
|
|
* SponsorActivityPanel
|
|
*
|
|
* A semantic component for displaying a feed of sponsor activities.
|
|
* Dense, chronological list.
|
|
*/
|
|
export function SponsorActivityPanel({ activities }: SponsorActivityPanelProps) {
|
|
return (
|
|
<Stack>
|
|
<Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
|
|
Recent Activity
|
|
</Heading>
|
|
<Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
|
|
{activities.length === 0 ? (
|
|
<Stack p={8} align="center">
|
|
<Icon icon={Clock} size={8} color="text-gray-600" className="mx-auto mb-3" />
|
|
<Text color="text-gray-500">No recent activity to show.</Text>
|
|
</Stack>
|
|
) : (
|
|
<Stack>
|
|
{activities.map((activity, index) => (
|
|
<Stack
|
|
key={activity.id}
|
|
p={4}
|
|
direction="row"
|
|
gap={4}
|
|
borderBottom={index !== activities.length - 1}
|
|
borderColor="border-charcoal-outline/30"
|
|
className="transition-colors hover:bg-bg-iron-gray/20"
|
|
>
|
|
<Stack
|
|
w="10"
|
|
h="10"
|
|
rounded="lg"
|
|
align="center"
|
|
justify="center"
|
|
bg={activity.color.replace('text-', 'bg-').concat('/10')}
|
|
>
|
|
<Icon icon={activity.icon} size={5} color={activity.color as any} />
|
|
</Stack>
|
|
<Stack flexGrow={1}>
|
|
<Stack direction="row" align="center" justify="between" mb={0.5}>
|
|
<Text weight="medium" color="text-white">{activity.title}</Text>
|
|
<Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400">{activity.description}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|