55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { Button, Card, CardBody, CardFooter, } from '@nextui-org/react'
|
|
import Image from 'next/image';
|
|
import React from 'react'
|
|
import { ChevronLeftWhite, ChevronRightIcon } from '../icons';
|
|
|
|
export default function ENewsPolri() {
|
|
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 md:h-[338px] space-y-7 m-auto md:m-10 flex 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='md:flex space-y-4 md:space-y-0 gap-4'>
|
|
{eNews.map((data) => (
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|