79 lines
3.3 KiB
TypeScript
79 lines
3.3 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",
|
|
},
|
|
];
|
|
|
|
// useEffect(() => {
|
|
// function updateLimitedData() {
|
|
// if (window.matchMedia("(max-width: 767px)").matches) {
|
|
// setLimitedData(eNews.slice(0, 1));
|
|
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
|
|
// setLimitedData(eNews.slice(0, 2));
|
|
// } else {
|
|
// setLimitedData(eNews.slice(0, 3));
|
|
// }
|
|
// }
|
|
|
|
// updateLimitedData();
|
|
// window.addEventListener('resize', updateLimitedData);
|
|
// return () => {
|
|
// window.removeEventListener('resize', updateLimitedData);
|
|
// };
|
|
// }, [eNews]);
|
|
|
|
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]'>
|
|
<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>
|
|
</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>
|
|
)
|
|
}
|