45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from 'react'
|
||
import Image from 'next/image'
|
||
import Link from 'next/link'
|
||
import { news } from '@/app/staticData'
|
||
import ShowMore from './ui/ShowMore'
|
||
|
||
interface NewsItem {
|
||
id: number
|
||
title: string
|
||
description: string
|
||
image: string
|
||
slug: string
|
||
}
|
||
|
||
export default function News() {
|
||
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.image}
|
||
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.description} />
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|