53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { Activity, Trophy, Medal, UserPlus, Heart, Flag, Play } from 'lucide-react';
|
|
import Button from '@/components/ui/Button';
|
|
import Link from 'next/link';
|
|
import { timeAgo } from '@/lib/utilities/time';
|
|
|
|
interface FeedItemData {
|
|
id: string;
|
|
type: string;
|
|
headline: string;
|
|
body?: string;
|
|
timestamp: string;
|
|
formattedTime: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
function FeedItemRow({ item }: { item: FeedItemData }) {
|
|
const getActivityIcon = (type: string) => {
|
|
if (type.includes('win')) return { icon: Trophy, color: 'text-yellow-400 bg-yellow-400/10' };
|
|
if (type.includes('podium')) return { icon: Medal, color: 'text-warning-amber bg-warning-amber/10' };
|
|
if (type.includes('join')) return { icon: UserPlus, color: 'text-performance-green bg-performance-green/10' };
|
|
if (type.includes('friend')) return { icon: Heart, color: 'text-pink-400 bg-pink-400/10' };
|
|
if (type.includes('league')) return { icon: Flag, color: 'text-primary-blue bg-primary-blue/10' };
|
|
if (type.includes('race')) return { icon: Play, color: 'text-red-400 bg-red-400/10' };
|
|
return { icon: Activity, color: 'text-gray-400 bg-gray-400/10' };
|
|
};
|
|
|
|
const { icon: Icon, color } = getActivityIcon(item.type);
|
|
|
|
return (
|
|
<div className="flex gap-3 p-3 rounded-lg bg-deep-graphite/50 border border-charcoal-outline">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${color} flex-shrink-0`}>
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-white">{item.headline}</p>
|
|
{item.body && (
|
|
<p className="text-xs text-gray-500 mt-1 line-clamp-2">{item.body}</p>
|
|
)}
|
|
<p className="text-xs text-gray-500 mt-1">{timeAgo(item.timestamp)}</p>
|
|
</div>
|
|
{item.ctaHref && (
|
|
<Link href={item.ctaHref} className="flex-shrink-0">
|
|
<Button variant="secondary" className="text-xs px-3 py-1.5">
|
|
{item.ctaLabel || 'View'}
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { FeedItemRow }; |