59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { Link } from "@/shared/config/navigation";
|
|
import { Title } from "@/shared/ui";
|
|
import Image, { StaticImageData } from "next/image";
|
|
|
|
interface INewsCard {
|
|
id: number;
|
|
image: StaticImageData | string;
|
|
title: string;
|
|
content: string;
|
|
date: string;
|
|
}
|
|
const NewsCard = ({ id, image, title, content, date }: INewsCard) => {
|
|
const sliceTitle = (title: string) => {
|
|
if (title.length > 35) {
|
|
return `${title.slice(0, 35)}...`;
|
|
}
|
|
|
|
return title;
|
|
};
|
|
const sliceDescription = (content: string) => {
|
|
if (content.length > 65) {
|
|
return `${content.slice(0, 65)}...`;
|
|
}
|
|
|
|
return content;
|
|
};
|
|
const sliceDate = (date: string) => {
|
|
return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(0, 4)}`;
|
|
};
|
|
return (
|
|
<div className="w-[393px] h-[508px] bg-white shadow-sm p-6 flex flex-col">
|
|
<Link
|
|
href={{
|
|
pathname: `/news/${id}`,
|
|
query: { новость: title },
|
|
}}
|
|
>
|
|
<Image
|
|
src={image}
|
|
alt="Card image"
|
|
width={345}
|
|
height={240}
|
|
className="mb-[32px]"
|
|
/>
|
|
<Title
|
|
text={sliceTitle(title)}
|
|
className="text-[24px] font-semibold mb-[12px]"
|
|
/>
|
|
<p className="leading-6 text-gray-600 mb-[46px]">
|
|
{sliceDescription(content)}
|
|
</p>
|
|
<p className="text-[14px] text-gray-600">{sliceDate(date)}</p>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewsCard;
|