47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import React from 'react'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import ShowMore from './ui/ShowMore'
|
||
import { NewsProps } from '@/app/types'
|
||
|
||
const News: React.FC<NewsProps> = ({ news }) => {
|
||
if (!news || news.length === 0) {
|
||
return null
|
||
}
|
||
return (
|
||
<div className="w-full max-w-[1250px] mx-auto px-4 sm:px-6 mb-20">
|
||
<h2 className="text-3xl sm:text-4xl text-center font-bold mb-10">
|
||
Последние новости
|
||
</h2>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{news.map((item) => (
|
||
<Link href={`/news/${item.slug}`} key={item.id}>
|
||
<div className="flex flex-col bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-2xl transition-shadow duration-500 p-6">
|
||
<div className="relative h-[200px]">
|
||
<Image
|
||
src={
|
||
item.titleImage.startsWith('http')
|
||
? item.titleImage
|
||
: `http://127.0.0.1:8000${item.titleImage}` ||
|
||
'/placeholder-image.jpg'
|
||
}
|
||
alt={item.title}
|
||
fill
|
||
className="object-cover rounded-2xl"
|
||
/>
|
||
</div>
|
||
<div className="pt-6">
|
||
<h3 className="text-base font-semibold mb-3">{item.title}</h3>
|
||
<ShowMore text={item.content} />
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default News
|