71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button } from '@/ui/Button';
|
|
import { FeedItem } from '@/ui/FeedItem';
|
|
import { TimeDisplay } from '@/lib/display-objects/TimeDisplay';
|
|
|
|
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={TimeDisplay.timeAgo(item.timestamp)}
|
|
content={
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
<div style={{ fontWeight: 'bold' }}>{item.headline}</div>
|
|
{item.body && <div>{item.body}</div>}
|
|
</div>
|
|
}
|
|
actions={item.ctaHref && item.ctaLabel ? (
|
|
<Button
|
|
as="a"
|
|
href={item.ctaHref}
|
|
variant="secondary"
|
|
size="sm"
|
|
>
|
|
{item.ctaLabel}
|
|
</Button>
|
|
) : undefined}
|
|
/>
|
|
);
|
|
}
|