73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { TimeFormatter } from '@/lib/formatters/TimeFormatter';
|
|
import { Button } from '@/ui/Button';
|
|
import { FeedItem } from '@/ui/FeedItem';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface FeedItemData {
|
|
id: string;
|
|
type: string;
|
|
headline: string;
|
|
body?: string;
|
|
timestamp: string;
|
|
formattedTime: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
async function resolveActor() {
|
|
return null;
|
|
}
|
|
|
|
interface FeedItemCardProps {
|
|
item: FeedItemData;
|
|
}
|
|
|
|
export function FeedItemCard({ item }: FeedItemCardProps) {
|
|
const [actor, setActor] = useState<{ name: string; avatarUrl: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
void (async () => {
|
|
const resolved = await resolveActor();
|
|
if (!cancelled) {
|
|
setActor(resolved);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [item]);
|
|
|
|
return (
|
|
<FeedItem
|
|
user={{
|
|
name: actor?.name || 'Unknown',
|
|
avatar: actor?.avatarUrl
|
|
}}
|
|
timestamp={TimeFormatter.timeAgo(item.timestamp)}
|
|
content={
|
|
<Stack gap={2}>
|
|
<Text weight="bold" variant="high">{item.headline}</Text>
|
|
{item.body && <Text variant="med">{item.body}</Text>}
|
|
</Stack>
|
|
}
|
|
actions={item.ctaHref && item.ctaLabel ? (
|
|
<Button
|
|
as="a"
|
|
href={item.ctaHref}
|
|
variant="secondary"
|
|
size="sm"
|
|
>
|
|
{item.ctaLabel}
|
|
</Button>
|
|
) : undefined}
|
|
/>
|
|
);
|
|
}
|