80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
import { Clock, ThumbsUp, MapPin, ThumbsDown } from 'lucide-react';
|
||
import { Link, useLocation } 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 location = useLocation();
|
||
|
||
return (
|
||
<article className={`overflow-hidden rounded-lg shadow-lg transition-transform hover:scale-[1.02] ${
|
||
featured ? 'sm:col-span-2 sm:row-span-2' : ''
|
||
} flex flex-col`}>
|
||
<div className="relative pt-7">
|
||
<img
|
||
src={article.coverImage}
|
||
alt={article.title}
|
||
className={`w-full object-cover ${featured ? 'h-64 sm:h-96' : 'h-64'}`}
|
||
/>
|
||
<div className="absolute bottom-0 left-0 w-full flex justify-between items-center z-10 px-4 py-2 bg-gradient-to-t from-black/70 to-transparent">
|
||
<span className="text-white text-sm md:text-base font-medium">
|
||
{CategoryTitles[article.categoryId]}
|
||
</span>
|
||
<span className="text-white text-sm md:text-base font-medium flex items-center">
|
||
<MapPin size={14} className="mr-1 text-white" />
|
||
{CityTitles[article.cityId]}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="p-6 flex flex-col flex-grow">
|
||
<div className="flex items-center gap-4 mb-4">
|
||
<img
|
||
src={article.author.avatarUrl}
|
||
alt={article.author.displayName}
|
||
className="w-12 h-12 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-xl sm:text-2xl' : 'text-xl'}`}>
|
||
{article.title}
|
||
</h2>
|
||
<p className="text-gray-600 line-clamp-2">{article.excerpt}</p>
|
||
|
||
<div className="p-4 mt-auto flex items-center justify-between">
|
||
<Link
|
||
to={`/article/${article.id}`}
|
||
state={{ from: location.pathname + location.search }}
|
||
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>
|
||
<span className="ml-2">
|
||
<ThumbsDown size={16} className="mr-1" />
|
||
</span>
|
||
<span>{article.dislikes}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
);
|
||
} |