web-humas-fe/components/landing/MedolUpdate.tsx

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>
  );
}