MCP-RSS-Crawler

import { FeedItem } from '@/lib/db'; import Link from 'next/link'; import { useContext } from 'react'; import { LayoutContext } from './Layout'; interface FeedItemCardProps { item: FeedItem; } export default function FeedItemCard({ item }: FeedItemCardProps) { // Get the setSelectedItem function from context const { setSelectedItem } = useContext(LayoutContext); // Format the published date const formattedDate = new Date(item.published * 1000).toLocaleString(); // Truncate summary if it's too long const truncateSummary = (text: string | null, maxLength: number = 150) => { if (!text) return ''; if (text.length <= maxLength) return text; return text.substring(0, maxLength) + '...'; }; // Handle click on the item title const handleItemClick = (e: React.MouseEvent) => { e.preventDefault(); setSelectedItem(item.id); }; return ( <div className="border rounded-lg p-4 mb-4 hover:shadow-md transition-shadow"> <div className="flex justify-between items-start mb-2"> <h3 className="text-lg font-semibold"> <a href="#" onClick={handleItemClick} className="hover:text-blue-600 cursor-pointer" > {item.title} </a> </h3> <span className="text-sm text-gray-500">{formattedDate}</span> </div> {item.feed_title && ( <div className="text-sm text-gray-600 mb-2"> From: <Link href={`/feed/${encodeURIComponent(item.feed_id)}`} className="hover:underline"> {item.feed_title} </Link> </div> )} {item.summary && ( <div className="text-gray-700 mb-3"> {truncateSummary(item.summary)} </div> )} <div className="flex justify-between items-center"> <div className="flex gap-2"> {item.categories && item.categories.map(category => ( <span key={category} className="bg-gray-200 text-xs px-2 py-1 rounded"> {category} </span> ))} </div> <div> <a href={item.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline text-sm" > Read original → </a> </div> </div> </div> ); }