67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
|
|
|
|
import { Box } from './Box';
|
|
import { Link } from './Link';
|
|
import { Text } from './Text';
|
|
import { Surface } from './Surface';
|
|
|
|
interface ActivityItemProps {
|
|
headline: string;
|
|
body?: string;
|
|
formattedTime: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
typeColor?: string;
|
|
}
|
|
|
|
export function ActivityItem({
|
|
headline,
|
|
body,
|
|
formattedTime,
|
|
ctaHref,
|
|
ctaLabel,
|
|
typeColor,
|
|
}: ActivityItemProps) {
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
padding={3}
|
|
rounded="lg"
|
|
style={{ display: 'flex', alignItems: 'start', gap: '0.75rem' }}
|
|
>
|
|
{typeColor && (
|
|
<Box
|
|
style={{
|
|
width: '0.5rem',
|
|
height: '0.5rem',
|
|
borderRadius: '9999px',
|
|
marginTop: '0.5rem',
|
|
backgroundColor: typeColor,
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
)}
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Text color="text-white" weight="medium" block>
|
|
{headline}
|
|
</Text>
|
|
{body && (
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
{body}
|
|
</Text>
|
|
)}
|
|
<Text size="xs" color="text-gray-500" block mt={1}>
|
|
{formattedTime}
|
|
</Text>
|
|
</Box>
|
|
{ctaHref && ctaLabel && (
|
|
<Box>
|
|
<Link href={ctaHref} variant="primary">
|
|
<Text size="xs">{ctaLabel}</Text>
|
|
</Link>
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
}
|