mediahub-fe/components/landing-page/Hero.tsx

import { textEllipsis } from "@/utils/globals";
import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/bundle";

const Hero: React.FC = () => {
  return (
    <div className="flex flex-col lg:flex-row items-start gap-4 px-4 lg:px-12 max-w-screen-xl py-4 mx-auto">
      {/* Section Gambar Utama */}
      <div className="lg:w-2/3 w-full lg:h-full cursor-pointer">
        <Swiper spaceBetween={50} slidesPerView={1} pagination={{ clickable: true }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)}>
          <SwiperSlide>
            <div className="relative h-[310px] lg:h-[420px]">
              <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
              <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
                <h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
                <p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="relative h-[310px] lg:h-[420px]">
              <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
              <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
                <h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
                <p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="relative h-[310px] lg:h-[420px]">
              <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
              <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
                <h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
                <p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="relative h-[310px] lg:h-[420px]">
              <img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
              <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
                <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
                <h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
                <p className="text-sm flex flex-row items-center gap-1 mt-1">
                  15 Maret 2024 14:01 WIB |{" "}
                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                    <path
                      fill="white"
                      d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                    />
                  </svg>{" "}
                  633{" "}
                </p>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>

      {/* Section Kanan */}
      <div className="lg:w-1/3 w-full">
        <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-full overflow-x-auto">
          {[
            {
              label: "OPS MANTAP PRAJA & PILKADA 2024",
              title: "Doa Bersama Lintas Agama Jelang Pilkada di Papua",
              time: "26 November 2024 16:33 WIT",
              views: 13,
              src: "https://mediahub.polri.go.id/api/media/view?id=113865&operation=thumbnail&isSmall=true&currentMilis=1732784412735",
            },
            {
              label: "OPS MANTAP PRAJA & PILKADA 2024",
              title: "Potret Pengawalan Distribusi Logistik Pilkada ke Distrik-distrik di Kabupaten Yahukimo",
              time: "26 November 2024 16:29 WIT",
              views: 29,
              src: "https://mediahub.polri.go.id/api/media/view?id=113948&operation=thumbnail&isSmall=true&currentMilis=1732784412735",
            },
            {
              label: "INFOGRAFIS",
              title: "Dirgahayu ke-62 Seskoal",
              time: "26 November 2024 16:26 WIB",
              views: 2,
              src: "https://mediahub.polri.go.id/api/media/view?id=113624&operation=thumbnail&isSmall=true&currentMilis=1732784412736",
            },
            {
              label: "UNGKAP KASUS",
              title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
              time: "26 November 2024 16:25 WIT",
              views: 26,
              src: "https://mediahub.polri.go.id/api/media/view?id=113815&operation=thumbnail&isSmall=true&currentMilis=1732784412736",
            },
            {
              label: "UNGKAP KASUS",
              title: "Evakuasi 30 Korban Kecelakaan Maut Truk di Tolikara",
              time: "26 November 2024 16:25 WIT",
              views: 26,
              src: "https://mediahub.polri.go.id/api/media/view?id=113815&operation=thumbnail&isSmall=true&currentMilis=1732784412736",
            },
          ].map((item, index) => (
            <li key={index} className="flex gap-4 flex-row lg:w-full ">
              <div className="flex-shrink-0 w-24 rounded-lg">
                <img src={item.src} alt={item.title} className="w-full object-cover rounded-lg" />
              </div>
              <div className="w-[280px] lg:w-auto">
                <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-xs font-bold uppercase w-fit">{item.label}</span>
                <h3 className="text-sm font-bold mt-2">{textEllipsis(item.title, 30)}</h3>
                <p className="text-xs flex flex-row items-center gap-1 text-gray-500 mt-1">
                  {item.time} |{" "}
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                    <path
                      fill="black"
                      d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                    />
                  </svg>{" "}
                  {item.views}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Hero;