68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Link } from './Link';
|
|
|
|
interface ActivityItemProps {
|
|
title?: string;
|
|
description?: string;
|
|
timeAgo?: string;
|
|
color?: string;
|
|
headline?: string;
|
|
body?: string;
|
|
formattedTime?: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
export function ActivityItem({
|
|
title,
|
|
description,
|
|
timeAgo,
|
|
color = 'bg-primary-blue',
|
|
headline,
|
|
body,
|
|
formattedTime,
|
|
ctaHref,
|
|
ctaLabel
|
|
}: ActivityItemProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
display="flex"
|
|
alignItems="start"
|
|
gap={3}
|
|
p={4}
|
|
>
|
|
<Box
|
|
w="2"
|
|
h="2"
|
|
mt={1.5}
|
|
rounded="full"
|
|
bg={color}
|
|
flexShrink={0}
|
|
/>
|
|
<Box flex={1} minWidth={0}>
|
|
<Text color="text-white" weight="medium" block>
|
|
{title || headline}
|
|
</Text>
|
|
<Text size="sm" color="text-gray-400" block mt={0.5}>
|
|
{description || body}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block mt={2}>
|
|
{timeAgo || formattedTime}
|
|
</Text>
|
|
{ctaHref && ctaLabel && (
|
|
<Box mt={3}>
|
|
<Link href={ctaHref} size="xs" variant="primary">
|
|
{ctaLabel}
|
|
</Link>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|