50 lines
953 B
TypeScript
50 lines
953 B
TypeScript
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
|
|
interface ActivityFeedItemProps {
|
|
icon: ReactNode;
|
|
content: ReactNode;
|
|
timestamp: string;
|
|
}
|
|
|
|
export function ActivityFeedItem({
|
|
icon,
|
|
content,
|
|
timestamp,
|
|
}: ActivityFeedItemProps) {
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="start"
|
|
gap={3}
|
|
py={3}
|
|
borderBottom
|
|
style={{ borderColor: 'rgba(38, 38, 38, 0.3)' }}
|
|
className="last:border-0"
|
|
>
|
|
<Surface
|
|
variant="muted"
|
|
w="8"
|
|
h="8"
|
|
rounded="full"
|
|
display="flex"
|
|
center
|
|
flexShrink={0}
|
|
>
|
|
{icon}
|
|
</Surface>
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Text size="sm" leading="relaxed" block>
|
|
{content}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" mt={1} block>
|
|
{timestamp}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|