328 lines
11 KiB
TypeScript
328 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 { topNewsMediahub } from "@/service/medol-news-update";
|
|
import Link from "next/link";
|
|
import {
|
|
getImageInp,
|
|
topNewsInp,
|
|
topNewsTbn,
|
|
} from "@/service/third-party-service";
|
|
import { convertDateFormatNoTime } from "@/utils/global";
|
|
import PolriTvWidget from "../ui/social-media/polri-tv";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function MedolUpdate() {
|
|
const [selectedTab, setSelectedTab] = useState<any>("mediahub");
|
|
const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
|
|
const [tbnUpdate, setTbnUpdate] = useState([]);
|
|
const [inpUpdate, setInpUpdate] = useState([]);
|
|
|
|
const t = useTranslations("Landing");
|
|
|
|
useEffect(() => {
|
|
if (selectedTab === "mediahub" && mediahubUpdate?.length < 1) {
|
|
getMedihubUpdate();
|
|
}
|
|
if (selectedTab === "tbnews" && tbnUpdate?.length < 1) {
|
|
getTbnUpdate();
|
|
}
|
|
if (selectedTab === "inp" && inpUpdate?.length < 1) {
|
|
getInpUpdate();
|
|
}
|
|
}, [selectedTab]);
|
|
|
|
async function getMedihubUpdate() {
|
|
const res = await topNewsMediahub();
|
|
setMediahubUpdate(res?.data?.data?.content);
|
|
}
|
|
|
|
async function getTbnUpdate() {
|
|
const res = await topNewsTbn();
|
|
setTbnUpdate(res?.data?.data);
|
|
}
|
|
async function getInpUpdate() {
|
|
const res = await topNewsInp();
|
|
// setInpUpdate(res?.data);
|
|
getDataImage(res?.data);
|
|
}
|
|
|
|
async function getDataImage(data: any) {
|
|
let temp = data;
|
|
for (let i = 0; i < data?.length; i++) {
|
|
const res = await getImageInp(temp[i].id);
|
|
const data = res?.data[0]?.guid?.rendered;
|
|
temp[i].image = data;
|
|
}
|
|
setInpUpdate(temp);
|
|
}
|
|
|
|
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"
|
|
selectedKey={selectedTab}
|
|
onSelectionChange={setSelectedTab}
|
|
>
|
|
<Tab key="mediahub" title="MediaHUB Update">
|
|
<Swiper
|
|
navigation={true}
|
|
modules={[Navigation, Pagination]}
|
|
spaceBetween={40}
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
// When the window width is less than 640px
|
|
720: {
|
|
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
|
},
|
|
}}
|
|
pagination={true}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
}}
|
|
>
|
|
{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 w-full"
|
|
>
|
|
<CardBody className="overflow-visible p-0">
|
|
<Image
|
|
radius="lg"
|
|
width="300%"
|
|
alt="tes"
|
|
className="object-cover !h-[30vh]"
|
|
src={newsItem.thumbnailLink}
|
|
/>
|
|
</CardBody>
|
|
<CardFooter className="flex flex-col items-start text-left">
|
|
<p className="text-xs">
|
|
{convertDateFormatNoTime(newsItem?.createdAt)}
|
|
</p>
|
|
<b className="">{newsItem?.title}</b>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="text-center pt-6">
|
|
<Link href="https://mediahub.polri.go.id" target="_blank">
|
|
<Button
|
|
className="bg-white text-[#DD8306] font-bold w-56"
|
|
size="sm"
|
|
color="warning"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</Tab>
|
|
<Tab key="tbnews" title="Tribrata News Update">
|
|
<Swiper
|
|
navigation={true}
|
|
modules={[Navigation, Pagination]}
|
|
spaceBetween={40}
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
// When the window width is less than 640px
|
|
720: {
|
|
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
|
},
|
|
}}
|
|
pagination={true}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
}}
|
|
>
|
|
{tbnUpdate?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.title}>
|
|
<Link href={newsItem?.source_url} target="_blank">
|
|
<Card
|
|
isPressable
|
|
shadow="sm"
|
|
className=" bg-white text-black border-2 w-full"
|
|
>
|
|
<CardBody className="overflow-visible p-0">
|
|
<Image
|
|
radius="lg"
|
|
width="300%"
|
|
alt="tes"
|
|
className="object-cover !h-[30vh]"
|
|
src={newsItem?.image}
|
|
/>
|
|
</CardBody>
|
|
<CardFooter className="flex flex-col items-start text-left">
|
|
{convertDateFormatNoTime(newsItem?.date)}
|
|
<b className="">{newsItem?.title}</b>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="text-center pt-6">
|
|
<Link href="https://tribratanews.polri.go.id" target="_blank">
|
|
<Button
|
|
className="bg-white text-[#DD8306] font-bold w-56"
|
|
size="sm"
|
|
color="warning"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</Tab>
|
|
<Tab key="inp" title="Indonesia Nasional Police Update">
|
|
<Swiper
|
|
navigation={true}
|
|
modules={[Navigation, Pagination]}
|
|
spaceBetween={40}
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
// When the window width is less than 640px
|
|
720: {
|
|
slidesPerView: 2, // Set slidesPerView to 1 on mobile
|
|
},
|
|
}}
|
|
pagination={true}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
}}
|
|
>
|
|
{inpUpdate?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem?.id}>
|
|
<Link href={newsItem?.link} target="_blank">
|
|
<Card
|
|
isPressable
|
|
shadow="sm"
|
|
className=" bg-white text-black border-2 w-full"
|
|
>
|
|
<CardBody className="overflow-visible p-0">
|
|
<Image
|
|
radius="lg"
|
|
width="300%"
|
|
alt="tes"
|
|
className="object-cover !h-[30vh]"
|
|
src={newsItem.image}
|
|
/>
|
|
</CardBody>
|
|
<CardFooter className="flex flex-col items-start text-left">
|
|
{convertDateFormatNoTime(newsItem?.date)}
|
|
<b className="">{newsItem?.title?.rendered}</b>
|
|
</CardFooter>
|
|
</Card>
|
|
</Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
<div className="text-center pt-6">
|
|
<a href="https://inp.polri.go.id/" target="_blank">
|
|
<Button
|
|
className="bg-white text-[#DD8306] font-bold w-56"
|
|
size="sm"
|
|
color="warning"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</Tab>
|
|
<Tab key="polritv" title="Polri TV Update">
|
|
<div className="w-full">
|
|
<div className="w-[40%] mx-auto">
|
|
<PolriTvWidget />
|
|
</div>
|
|
</div>
|
|
<div className="text-center pt-6">
|
|
<Link
|
|
href="https://www.youtube.com/@TvRadioPolri"
|
|
target="_blank"
|
|
>
|
|
<Button
|
|
className="bg-white text-[#DD8306] font-bold w-56"
|
|
size="sm"
|
|
color="warning"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|