79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button } from '@/ui/Button';
|
|
import { FeedItem } from '@/ui/FeedItem';
|
|
|
|
interface FeedItemData {
|
|
id: string;
|
|
type: string;
|
|
headline: string;
|
|
body?: string;
|
|
timestamp: string;
|
|
formattedTime: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
function timeAgo(timestamp: Date | string): string {
|
|
const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
|
|
const diffMs = Date.now() - date.getTime();
|
|
const diffMinutes = Math.floor(diffMs / 60000);
|
|
if (diffMinutes < 1) return 'Just now';
|
|
if (diffMinutes < 60) return `${diffMinutes} min ago`;
|
|
const diffHours = Math.floor(diffMinutes / 60);
|
|
if (diffHours < 24) return `${diffHours} h ago`;
|
|
const diffDays = Math.floor(diffHours / 24);
|
|
return `${diffDays} d ago`;
|
|
}
|
|
|
|
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
|
|
actorName={actor?.name}
|
|
actorAvatarUrl={actor?.avatarUrl}
|
|
typeLabel={item.type.startsWith('friend') ? 'FR' : 'LG'}
|
|
headline={item.headline}
|
|
body={item.body}
|
|
timeAgo={timeAgo(item.timestamp)}
|
|
cta={item.ctaHref && item.ctaLabel ? (
|
|
<Button
|
|
as="a"
|
|
href={item.ctaHref}
|
|
variant="secondary"
|
|
size="sm"
|
|
px={4}
|
|
py={2}
|
|
>
|
|
{item.ctaLabel}
|
|
</Button>
|
|
) : undefined}
|
|
/>
|
|
);
|
|
}
|