78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import Image from 'next/image';
|
|
import { Box } from './Box';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Card } from './Card';
|
|
|
|
interface FeedItemProps {
|
|
actorName?: string;
|
|
actorAvatarUrl?: string;
|
|
typeLabel: string;
|
|
headline: string;
|
|
body?: string;
|
|
timeAgo: string;
|
|
cta?: ReactNode;
|
|
}
|
|
|
|
export function FeedItem({
|
|
actorName,
|
|
actorAvatarUrl,
|
|
typeLabel,
|
|
headline,
|
|
body,
|
|
timeAgo,
|
|
cta,
|
|
}: FeedItemProps) {
|
|
return (
|
|
<Box display="flex" gap={4}>
|
|
<Box flexShrink={0}>
|
|
{actorAvatarUrl ? (
|
|
<Box width="10" height="10" rounded="full" overflow="hidden" bg="bg-charcoal-outline">
|
|
<Image
|
|
src={actorAvatarUrl}
|
|
alt={actorName || ''}
|
|
width={40}
|
|
height={40}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<Box
|
|
width="10"
|
|
height="10"
|
|
display="flex"
|
|
center
|
|
rounded="full"
|
|
bg="bg-primary-blue/10"
|
|
border={true}
|
|
borderColor="border-primary-blue/40"
|
|
>
|
|
<Text size="xs" color="text-primary-blue" weight="semibold">
|
|
{typeLabel}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Box flexGrow={1} minWidth="0">
|
|
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
|
|
<Box>
|
|
<Text size="sm" color="text-white" block>{headline}</Text>
|
|
{body && (
|
|
<Text size="xs" color="text-gray-400" block mt={1}>{body}</Text>
|
|
)}
|
|
</Box>
|
|
<Text size="xs" color="text-gray-500" className="whitespace-nowrap" style={{ fontSize: '11px' }}>
|
|
{timeAgo}
|
|
</Text>
|
|
</Box>
|
|
{cta && (
|
|
<Box mt={3}>
|
|
{cta}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|