35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface ActivityItemProps {
|
|
activity: {
|
|
id: string;
|
|
message: string;
|
|
time: string;
|
|
typeColor: string;
|
|
formattedImpressions?: string | null;
|
|
};
|
|
}
|
|
|
|
export function ActivityItem({ activity }: ActivityItemProps) {
|
|
return (
|
|
<Stack direction="row" align="start" gap={3} style={{ padding: '0.75rem 0', borderBottom: '1px solid rgba(38, 38, 38, 0.5)' }}>
|
|
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', marginTop: '0.5rem', backgroundColor: activity.typeColor }} />
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Text size="sm" color="text-white" style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{activity.message}</Text>
|
|
<Stack direction="row" align="center" gap={2} style={{ marginTop: '0.25rem' }}>
|
|
<Text size="xs" color="text-gray-500">{activity.time}</Text>
|
|
{activity.formattedImpressions && (
|
|
<>
|
|
<Text size="xs" color="text-gray-600">•</Text>
|
|
<Text size="xs" color="text-gray-400">{activity.formattedImpressions} views</Text>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|