turkmen-expo/components/shared/news-card.tsx

35 lines
971 B
TypeScript

import React from 'react';
import Image from 'next/image';
import { Link } from '@/i18n/navigation';
interface Props {
img: string;
date: string;
id: number;
title: string;
mobile?: boolean;
}
export const NewsCard = ({ img, title, date, id, mobile = false }: Props) => {
return (
<div className="bg-white rounded-[4px] mx-auto w-full transition-all h-[415px]">
{/* Aspect ration 1.8:1 */}
<Image
src={img}
width={290}
height={221}
alt="photo"
className="mob:h-[221px] h-[160px] w-full object-cover rounded-t-[4px]"
/>
<Link href={`/news/${id}`} className="h-full">
<div className="p-[25px] h-[160px] sm:h-[140px]">
<p className="text-extraSm leading-[125%] text-[#787878] mb-[10px]">{date}</p>
<p className="font-medium leading-[135%] sm:text-[22px] text-[21px] line-clamp-4">
{title}
</p>
</div>
</Link>
</div>
);
};