79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Box, BoxProps } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { LucideIcon, Clock } 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 (
|
|
<Box>
|
|
<Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
|
|
Recent Activity
|
|
</Heading>
|
|
<Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
|
|
{activities.length === 0 ? (
|
|
<Box p={8} textAlign="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>
|
|
</Box>
|
|
) : (
|
|
<Box>
|
|
{activities.map((activity, index) => (
|
|
<Box
|
|
key={activity.id}
|
|
p={4}
|
|
display="flex"
|
|
gap={4}
|
|
borderBottom={index !== activities.length - 1}
|
|
borderColor="border-charcoal-outline/30"
|
|
hoverBg="bg-iron-gray/20"
|
|
transition-colors
|
|
>
|
|
<Box
|
|
w="10"
|
|
h="10"
|
|
rounded="lg"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg={activity.color.replace('text-', 'bg-').concat('/10') as BoxProps<'div'>['bg']}
|
|
>
|
|
<Icon icon={activity.icon} size={5} color={activity.color as any} />
|
|
</Box>
|
|
<Box flexGrow={1}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={0.5}>
|
|
<Text weight="medium" color="text-white">{activity.title}</Text>
|
|
<Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
|
|
</Box>
|
|
<Text size="sm" color="text-gray-400">{activity.description}</Text>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|