web-humas-fe/components/ui/social-media/facebook-new.tsx

"use client";

import { facebookHumasData } from "@/services/generate-article";
import {
  Button,
  Card,
  CardBody,
  CardFooter,
  Image,
  Modal,
  ModalBody,
  ModalContent,
  ModalHeader,
  Spinner,
  useDisclosure,
} from "@heroui/react";
import Link from "next/link";
import { 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 dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { FacebookIcon, FacebookLandingIcon } from "@/components/icons";
import { textEllipsis } from "@/utils/global";
import FacebookEmbed from "./facebook";

dayjs.extend(relativeTime);

const formatRelativeTime = (dateString: string): string => {
  return dayjs(dateString, "DD MMM YYYY HH:mm:ss").fromNow();
};

export default function FacebookWidgetNew() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const [selected, setSelected] = useState("");
  const [facebookData, setFacebookData] = useState<any>([]);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const res = await facebookHumasData();
    setFacebookData(res?.data?.data);
  };
  return facebookData?.length > 1 ? (
    <div className="flex flex-col gap-4">
      <div className="flex justify-between w-full px-2 items-center">
        <div className="flex flex-row gap-2 items-center">
          <Image src="/divhumas.png" alt="humas-polri" className="!w-[68px]" />{" "}
          <p className="font-semibold">Divisi Humas Polri</p>
        </div>
        <Link target="_blank" href="https://www.facebook.com/DivHumasPolri">
          <Button radius="sm" color="primary">
            Follow us
          </Button>
        </Link>
      </div>
      <Swiper
        navigation={true}
        modules={[Navigation]}
        spaceBetween={10}
        slidesPerView={1}
        breakpoints={{
          // When the window width is less than 640px
          720: {
            slidesPerView: 3, // Set slidesPerView to 1 on mobile
          },
          1080: {
            slidesPerView: 4,
          },
        }}
        pagination={true}
        className="mySwiper custom-button-slider !px-[8px]"
        onSwiper={(swiper) => {
          swiper.navigation.nextEl?.classList.add(
            "bg-white",
            "!text-black",
            "rounded-full",
            "!w-[40px]",
            "!h-[40px]",
            "!border-2"
          );
          swiper.navigation.prevEl?.classList.add(
            "bg-white",
            "!text-black",
            "rounded-full",
            "!w-[40px]",
            "!h-[40px]",
            "!border-2"
          );
        }}
      >
        {facebookData?.map((data: any) => (
          <SwiperSlide
            key={data.id}
            className="hover:shadow-xl hover:opacity-90"
          >
            <Card
              isPressable
              shadow="none"
              className=" bg-white text-black border-2 w-full"
              onPress={() => {
                setSelected(data.url);
                onOpen();
              }}
            >
              <CardBody className="overflow-visible px-5 lg:py-10 text-center flex flex-col gap-2 justify-center items-center text-sm">
                <FacebookLandingIcon size={24} />
                <p>{textEllipsis(data.text, 200)}</p>
                <div className="flex flex-col gap-1">
                  {" "}
                  <p className="font-bold">Divisi Humas Polri</p>
                  <p className="text-xs">
                    {formatRelativeTime(data.publishedDate)}
                  </p>
                </div>

                <Image
                  src="/divhumas.png"
                  alt="humas-polri"
                  className="!w-[48px]"
                />
              </CardBody>
            </Card>
          </SwiperSlide>
        ))}
      </Swiper>

      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        size="xl"
        placement="center"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalBody>
                <FacebookEmbed postUrl={selected} />
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  ) : (
    <div className="w-full flex justify-center items-center">
      <Spinner size="lg" className="mx-auto" color="default" />
    </div>
  );
}