247 lines
13 KiB
TypeScript
247 lines
13 KiB
TypeScript
import { Button, Card, CardBody, CardFooter, Image, Tab, Tabs } from '@nextui-org/react';
|
||
import React from 'react'
|
||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
import 'swiper/css';
|
||
import 'swiper/css/navigation';
|
||
import 'swiper/css/pagination';
|
||
import { Navigation, Pagination } from 'swiper/modules';
|
||
|
||
export default function MedolUpdate() {
|
||
|
||
const mediaHubUpdate = [
|
||
{
|
||
id: 1,
|
||
image: '/temp/mediahub1.png',
|
||
title: 'Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan',
|
||
createdDate: '12 Januari 2024',
|
||
time: '13:00 WITA'
|
||
},
|
||
{
|
||
id: 2,
|
||
image: '/temp/mediahub2.png',
|
||
title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
|
||
createdDate: '14 Januari 2024',
|
||
time: '13:00 WIB'
|
||
},
|
||
{
|
||
id: 3,
|
||
image: '/temp/mediahub2.png',
|
||
title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
|
||
createdDate: '14 Januari 2024',
|
||
time: '13:00 WIB'
|
||
},
|
||
{
|
||
id: 4,
|
||
image: '/temp/mediahub2.png',
|
||
title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
|
||
createdDate: '14 Januari 2024',
|
||
time: '13:00 WIB'
|
||
},
|
||
{
|
||
id: 5,
|
||
image: '/temp/mediahub2.png',
|
||
title: 'Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak',
|
||
createdDate: '14 Januari 2024',
|
||
time: '13:00 WIB'
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className='border-2 rounded-lg py-2'>
|
||
<div className='text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 '>
|
||
Top 5 News Update
|
||
</div>
|
||
<div className='bg-white text-black p-1 md:p-5 space-y-5'>
|
||
<Tabs
|
||
classNames={{
|
||
tabList: "bg-white shadow-lg border",
|
||
tabContent: 'group-data-[selected=true]:text-[white] text-warning'
|
||
}}
|
||
aria-label="Options" color='warning' className='flex justify-center'>
|
||
<Tab key="mediahub" title="MediaHUB Update">
|
||
<Swiper
|
||
navigation={true}
|
||
modules={[Navigation, Pagination]}
|
||
spaceBetween={40}
|
||
slidesPerView={2}
|
||
pagination={true}
|
||
className="mySwiper">
|
||
{mediaHubUpdate.map((newsItem) => (
|
||
<SwiperSlide>
|
||
<Card shadow="sm" className=' bg-white text-black border-2'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
radius="lg"
|
||
width="300%"
|
||
alt="tes"
|
||
className="object-cover h-[270px]"
|
||
src={newsItem.image}
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:31 WITA</p>
|
||
<b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
|
||
</CardFooter>
|
||
</Card>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
<div className='text-center pt-6'>
|
||
<Button
|
||
className='bg-white text-[#DD8306] font-bold w-56'
|
||
size='sm'
|
||
color='warning'
|
||
variant='bordered'
|
||
|
||
>
|
||
Lihat Lebih Banyak
|
||
</Button>
|
||
</div>
|
||
</Tab>
|
||
<Tab key="tbnews" title="Tribrata News Update">
|
||
<div className='flex gap-5 justify-center pt-3'>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="300%"
|
||
alt="tes"
|
||
className="object-cover h-[270px]"
|
||
src='/temp/mediahub1.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:31 WITA</p>
|
||
<b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
|
||
</CardFooter>
|
||
</Card>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="100%"
|
||
alt="tes"
|
||
className="w-full object-cover h-[270px]"
|
||
src='/temp/mediahub2.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:16 WIB</p>
|
||
<b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
<div className='text-center pt-6'>
|
||
<Button
|
||
className='bg-white text-[#DD8306] font-bold w-56'
|
||
size='sm'
|
||
color='warning'
|
||
variant='bordered'
|
||
|
||
>
|
||
Lihat Lebih Banyak
|
||
</Button>
|
||
</div>
|
||
</Tab>
|
||
<Tab key="inp" title="Indonesia Nasional Police Update">
|
||
<div className='flex gap-5 justify-center pt-3'>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="300%"
|
||
alt="tes"
|
||
className="object-cover h-[270px]"
|
||
src='/temp/mediahub1.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:31 WITA</p>
|
||
<b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
|
||
</CardFooter>
|
||
</Card>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="100%"
|
||
alt="tes"
|
||
className="w-full object-cover h-[270px]"
|
||
src='/temp/mediahub2.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:16 WIB</p>
|
||
<b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
<div className='text-center pt-6'>
|
||
<Button
|
||
className='bg-white text-[#DD8306] font-bold w-56'
|
||
size='sm'
|
||
color='warning'
|
||
variant='bordered'
|
||
|
||
>
|
||
Lihat Lebih Banyak
|
||
</Button>
|
||
</div>
|
||
</Tab>
|
||
<Tab key="polritv" title="Polri TV Update">
|
||
<div className='flex gap-5 justify-center pt-3'>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="300%"
|
||
alt="tes"
|
||
className="object-cover h-[270px]"
|
||
src='/temp/mediahub1.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:31 WITA</p>
|
||
<b className=''>Peringatan Nuzulul Quran, Kapolda Sulbar Harap Kegiatan Ini Tambah Wawasan dan</b>
|
||
</CardFooter>
|
||
</Card>
|
||
<Card shadow="sm" isPressable onPress={() => console.log("item pressed")} className='w-[45%] bg-white text-black'>
|
||
<CardBody className="overflow-visible p-0">
|
||
<Image
|
||
shadow="sm"
|
||
radius="lg"
|
||
width="100%"
|
||
alt="tes"
|
||
className="w-full object-cover h-[270px]"
|
||
src='/temp/mediahub2.png'
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className='text-xs'>02-04-2024 09:16 WIB</p>
|
||
<b>Kapolri Tinjau Langsung Kondisi Pelayanan Pemudik di Dermaga 1 Pelabuhan Merak</b>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
<div className='text-center pt-6'>
|
||
<Button
|
||
className='bg-white text-[#DD8306] font-bold w-56'
|
||
size='sm'
|
||
color='warning'
|
||
variant='bordered'
|
||
|
||
>
|
||
Lihat Lebih Banyak
|
||
</Button>
|
||
</div>
|
||
</Tab>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|