76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { Clock, ThumbsUp, MapPin } from 'lucide-react';
|
||
import { Link } from 'react-router-dom';
|
||
import { Article, CategoryTitles, CityTitles } from '../types';
|
||
import MinutesWord from './MinutesWord';
|
||
|
||
interface ArticleCardProps {
|
||
article: Article;
|
||
featured?: boolean;
|
||
}
|
||
|
||
export function ArticleCard({ article, featured = false }: ArticleCardProps) {
|
||
const categoryName = CategoryTitles[article.categoryId];
|
||
|
||
return (
|
||
<article className={`overflow-hidden rounded-lg shadow-lg transition-transform hover:scale-[1.02] ${
|
||
featured ? 'col-span-2 row-span-2' : ''
|
||
}`}>
|
||
<div className="relative">
|
||
<img
|
||
src={article.coverImage}
|
||
alt={article.title}
|
||
className={`w-full object-cover ${featured ? 'h-96' : 'h-64'}`}
|
||
/>
|
||
<div className="absolute top-4 left-4 flex gap-2">
|
||
<span className="bg-white/90 px-3 py-1 rounded-full text-sm font-medium">
|
||
{categoryName}
|
||
</span>
|
||
<span className="bg-white/90 px-3 py-1 rounded-full text-sm font-medium flex items-center">
|
||
<MapPin size={14} className="mr-1" />
|
||
{CityTitles[article.cityId]}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<img
|
||
src={article.author.avatarUrl}
|
||
alt={article.author.displayName}
|
||
className="w-10 h-10 rounded-full"
|
||
/>
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-900">{article.author.displayName}</p>
|
||
<div className="flex items-center text-sm text-gray-500">
|
||
<Clock size={14} className="mr-1" />
|
||
{article.readTime} <MinutesWord minutes={article.readTime} /> ·{' '}
|
||
{new Date(article.publishedAt).toLocaleDateString('ru-RU', {
|
||
month: 'long',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className={`font-bold text-gray-900 mb-2 ${featured ? 'text-2xl' : 'text-xl'}`}>
|
||
{article.title}
|
||
</h2>
|
||
<p className="text-gray-600 line-clamp-2">{article.excerpt}</p>
|
||
|
||
<div className="mt-4 flex items-center justify-between">
|
||
<Link
|
||
to={`/article/${article.id}`}
|
||
className="text-blue-600 font-medium hover:text-blue-800"
|
||
>
|
||
Читать →
|
||
</Link>
|
||
<div className="flex items-center text-gray-500">
|
||
<ThumbsUp size={16} className="mr-1" />
|
||
<span>{article.likes}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
);
|
||
} |