63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
'use client'
|
|
import { Card, CardFooter } from '@nextui-org/react';
|
|
import Image from 'next/image';
|
|
import { useState } from 'react';
|
|
import { ChevronLeftWhite, ChevronRightIcon } from '../icons';
|
|
import Link from 'next/link';
|
|
|
|
export default function ENewsPolri() {
|
|
const [limitedData, setLimitedData] = useState<any>([]);
|
|
|
|
const eNews = [
|
|
{
|
|
id: 1,
|
|
title: "Tribrata News Edisi 32 /IV-VI/ENews Polri/2024",
|
|
img: "/headernews.png",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Tribrata News Edisi 32 /IV-VI/ 2024",
|
|
img: "/headernews.png",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Tribrata News Edisi 32 /IV-VI/ 2024",
|
|
img: "/headernews.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-5 flex py-4 flex-col justify-center items-center'>
|
|
<p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
|
|
<div className='flex flex-row w-full items-center justify-between'>
|
|
<ChevronLeftWhite />
|
|
<div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2 lg:gap-8'>
|
|
{eNews.map((data: any) => (
|
|
<div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
|
|
<Link href={`/e-majalah-polri/detail/${data.id}`}>
|
|
<Card className='text-white'
|
|
isFooterBlurred
|
|
>
|
|
<Image
|
|
alt="Woman listing to music"
|
|
className="object-cover h-full"
|
|
height={100}
|
|
src={data.img}
|
|
width={100}
|
|
layout='responsive'
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
|
|
<p className='text-xs text-left'>{data.title}</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ChevronRightIcon color='white' />
|
|
</div>
|
|
<Link className='flex items-center gap-2 text-[#DD8306]' href='/e-majalah-polri/daftar-majalah'>Lihat Semua <ChevronRightIcon color='[#DD8306]' /></Link>
|
|
</div>
|
|
)
|
|
}
|