88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { NewsArticle, CurrentView } from '../types';
|
||
|
|
import { ViewMode } from './FilterSortBar';
|
||
|
|
|
||
|
|
interface NewsCardProps {
|
||
|
|
article: NewsArticle;
|
||
|
|
setCurrentView: (view: CurrentView) => void;
|
||
|
|
setSelectedItemId: (id: string | null) => void;
|
||
|
|
viewMode?: ViewMode;
|
||
|
|
}
|
||
|
|
|
||
|
|
const NewsCard: React.FC<NewsCardProps> = ({ article, setCurrentView, setSelectedItemId, viewMode = 'grid' }) => {
|
||
|
|
|
||
|
|
const handleCardClick = () => {
|
||
|
|
setCurrentView('newsArticleDetail');
|
||
|
|
setSelectedItemId(article.id);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (viewMode === 'list') {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={handleCardClick}
|
||
|
|
className="group block p-4 rounded-lg bg-white transition-all duration-300 ease-in-out hover:bg-slate-50 cursor-pointer w-full"
|
||
|
|
role="article"
|
||
|
|
aria-labelledby={`news-title-${article.id}`}
|
||
|
|
>
|
||
|
|
<div className="flex items-start space-x-4">
|
||
|
|
<div className="flex-shrink-0 w-24 h-24 md:w-28 md:h-28 rounded-md overflow-hidden bg-slate-200">
|
||
|
|
<img
|
||
|
|
src={article.imageUrl}
|
||
|
|
alt={`Изображение для новости: ${article.title}`}
|
||
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out"
|
||
|
|
loading="lazy"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h4 id={`news-title-${article.id}`} className="text-base md:text-lg font-quicksand font-semibold text-slate-800 group-hover:text-black mb-1 transition-colors duration-200 leading-tight">
|
||
|
|
{article.title}
|
||
|
|
</h4>
|
||
|
|
<p className="text-xs text-slate-500 mb-2">
|
||
|
|
<span className="font-semibold text-slate-600">{article.category}</span>
|
||
|
|
<span className="mx-1.5 text-slate-400">•</span>
|
||
|
|
<span>{article.date}</span>
|
||
|
|
</p>
|
||
|
|
{article.description && (
|
||
|
|
<p className="text-sm text-slate-600 line-clamp-2 font-inter">{article.description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={handleCardClick}
|
||
|
|
className="group block rounded-xl overflow-hidden transition-all duration-300 ease-in-out bg-white transform hover:-translate-y-1 cursor-pointer shadow-sm hover:shadow-md"
|
||
|
|
role="article"
|
||
|
|
aria-labelledby={`news-title-${article.id}`}
|
||
|
|
>
|
||
|
|
<div className="relative w-full overflow-hidden aspect-video">
|
||
|
|
<img
|
||
|
|
src={article.imageUrl}
|
||
|
|
alt={`Изображение для новости: ${article.title}`}
|
||
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out"
|
||
|
|
loading="lazy"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="p-4">
|
||
|
|
<p className="text-xs text-slate-500 mb-2">
|
||
|
|
<span className="font-semibold text-slate-600">{article.category}</span>
|
||
|
|
<span className="mx-1.5 text-slate-400">•</span>
|
||
|
|
<span>{article.date}</span>
|
||
|
|
</p>
|
||
|
|
<h4 id={`news-title-${article.id}`} className="text-base font-quicksand font-semibold text-slate-800 group-hover:text-black mb-1 transition-colors duration-200 leading-tight">
|
||
|
|
{article.title}
|
||
|
|
</h4>
|
||
|
|
{article.description && (
|
||
|
|
<p className="text-sm text-slate-600 line-clamp-3 font-inter">{article.description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NewsCard;
|