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

"use client";
import { Button, Card, CardFooter, ScrollShadow } from "@nextui-org/react";
import Image from "next/image";
import { EyeIcon } from "../icons";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";

export default function HeaderNews() {
  const [article, setArticle] = useState<any>([]);

  useEffect(() => {
    async function getArticle() {
      const response = await getListArticle();
      console.log("res", response?.data?.data);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);

  return (
    <div className=" bg-[#1F1A17] gap-3 md:py-6 md:px-12 md:h-[700px]">
      <div className="lg:flex items-center justify-center bg-white p-1 md:p-4 rounded-lg gap-3 md:h-[654px] md:w-fit md:mx-auto">
        <div className="w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md mb-2 md:mb-0 md:h-[636px]">
          <p className="text-lg font-bold h-10 text-center">Berita Terkini</p>
          <ScrollShadow hideScrollBar className="md:h-[530px] gap-3">
            {article?.map((data: any) => (
              <div
                className="text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md"
                key={data.id}
              >
                <p>{data.title}</p>
                <p className="py-[2px]">
                  {" "}
                  {convertDateFormat(data.createdAt)} WIB
                </p>
                <p className="flex items-center gap-1">
                  <EyeIcon />
                  {data.viewCount === null ? 0 : data.viewCount}
                </p>
              </div>
            ))}
          </ScrollShadow>
          <div className="m-2">
            <Link href="/news/all">
              <Button
                className="w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none"
                radius="none"
              >
                Lihat Semua
              </Button>
            </Link>
          </div>
        </div>
        <div className="w-auto lg:w-[910px] md:h-[636px]">
          <div className="md:h-[636px]">
            <Swiper
              centeredSlides={true}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              pagination={{
                clickable: true,
              }}
              navigation={true}
              modules={[Autoplay, Pagination, Navigation]}
              className="mySwiper"
              height={636}
            >
              {article?.map((newsItem: any) => (
                <SwiperSlide key={newsItem.id}>
                  <Card isFooterBlurred radius="lg" className="border-none">
                    <Image
                      alt="headernews"
                      height={400}
                      src="/headernews.png"
                      width={460}
                      layout="responsive"
                    />
                    <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                      <div className="text-white">
                        <Link href={`news/detail/${newsItem.id}`}>
                          <p className="text-left font-semibold">
                            {newsItem.title}
                          </p>
                        </Link>
                        <p className="py-[2px] text-left text-sm">
                          {convertDateFormat(newsItem.createdAt)} WIB
                        </p>
                        <p className="flex items-center gap-1 text-sm">
                          <EyeIcon />
                          {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                        </p>
                      </div>
                    </CardFooter>
                  </Card>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
        <div className="w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black ">
          <GPRKominfo />
          {/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
                    <img src="/gprheader.png" alt="gpr" className='w-full' />
                </div>
                <div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
                        <p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
                        <p className='py-[2px]'>21-07-2023 13:50</p>
                        <p className='flex items-center gap-1'><EyeIcon />82</p>
                    </div>
                </div>
                <div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
                    <img src="/gprfooter.png" alt="gpr" className='w-full' />
                </div> */}
        </div>
      </div>
    </div>
  );
}