327 lines
11 KiB
TypeScript
327 lines
11 KiB
TypeScript
import {
|
||
Button,
|
||
Card,
|
||
CardBody,
|
||
CardFooter,
|
||
Image,
|
||
Tab,
|
||
Tabs,
|
||
} from "@nextui-org/react";
|
||
import React, { useEffect, useState } 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";
|
||
import { top5NewsMediahub } from "@/service/medol-news-update";
|
||
import Link from "next/link";
|
||
|
||
export default function MedolUpdate() {
|
||
const [mediahubUpdate, setMediahubUpdate] = useState<any>();
|
||
|
||
useEffect(() => {
|
||
async function getMedihubUpdate() {
|
||
const res = await top5NewsMediahub();
|
||
setMediahubUpdate(res.data?.data?.content);
|
||
// console.log("List Top5News", res.data.data?.content);
|
||
}
|
||
|
||
getMedihubUpdate();
|
||
}, []);
|
||
|
||
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: any) => (
|
||
<SwiperSlide key={newsItem.title}>
|
||
<Link href={newsItem?.pageUrl} target="_blank">
|
||
<Card
|
||
isPressable
|
||
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.thumbnailLink}
|
||
/>
|
||
</CardBody>
|
||
<CardFooter className="flex flex-col items-start text-left">
|
||
<p className="text-xs">02-04-2024 09:31 WITA</p>
|
||
<b className="">{newsItem?.title}</b>
|
||
</CardFooter>
|
||
</Card>
|
||
</Link>
|
||
</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>
|
||
);
|
||
}
|