mediahub-fe/app/[locale]/(public)/indeks/page.tsx

"use client";

import { Skeleton } from "@/components/ui/skeleton";
import { Link } from "@/i18n/routing";
import { getIndeksData } from "@/service/landing/landing";
import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
import Image from "next/image";
import { usePathname } from "next/navigation";
import React, { useEffect, useState } from "react";

const Indeks: React.FC = () => {
  const pathname = usePathname();
  const [isLoading, setIsLoading] = useState<any>(true);
  const [indeksData, setIndeksData] = useState<any>();
  let count: number = 0;
  useEffect(() => {
    if (indeksData) {
      const intervalId = setInterval(() => {
        count = (count + 1) % indeksData.length;
      }, 5000);

      return () => clearInterval(intervalId);
    }
  }, [indeksData]);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getIndeksData();
    console.log(response);
    setIndeksData(response?.data?.data?.content);
  };

  const shimmer = (w: number, h: number) => `
  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <linearGradient id="g">
        <stop stop-color="#bcbcbd" offset="20%" />
        <stop stop-color="#f9fafb" offset="50%" />
        <stop stop-color="#bcbcbd" offset="70%" />
      </linearGradient>
    </defs>
    <rect width="${w}" height="${h}" fill="#bcbcbd" />
    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
  </svg>`;

  const toBase64 = (str: string) =>
    typeof window === "undefined"
      ? Buffer.from(str).toString("base64")
      : window.btoa(str);

  return (
    <div className="px-4 lg:px-14">
      {/* Hero Left */}
      <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
        {isLoading ? (
          <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
            <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
          </div>
        ) : (
          <div className="lg:w-[60%] w-full lg:h-full">
            {indeksData?.map(
              (indeks: any, index: number) =>
                index == count && (
                  <div
                    key={indeks?.id}
                    className="relative h-[310px] lg:h-[435px]"
                  >
                    <Image
                      placeholder={`data:image/svg+xml;base64,${toBase64(
                        shimmer(700, 475)
                      )}`}
                      width={2560}
                      height={1440}
                      src={indeks?.thumbnailLink}
                      alt="image"
                      className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover"
                    />
                    <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
                        {indeks?.categoryName}
                      </span>
                      <Link href={`/indeks/detail/${indeks?.slug}`}>
                        <h2 className="text-2xl font-bold mt-2">
                          {indeks?.title}
                        </h2>
                      </Link>
                      <p className="text-xs flex flex-row items-center gap-1 mt-1">
                        {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
                        {indeks?.timezone ? indeks?.timezone : "WIB"} |{" "}
                        {/* <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="1.2em"
                          height="1.2em"
                          viewBox="0 0 24 24"
                        >
                          <path
                            fill="currentColor"
                            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>{" "} */}
                        {/* {indeks?.clickCount} */}
                      </p>
                    </div>
                  </div>
                )
            )}
          </div>
        )}

        {/* Hero Right */}
        <div className="lg:w-[40%] w-full space-y-2">
          {isLoading ? (
            <>
              <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
              </div>
            </>
          ) : (
            <>
              {indeksData?.map(
                (indeksRight: any, index: number) =>
                  (index == count + 1 || index == count + 2) && (
                    <div
                      key={indeksRight?.id}
                      className="relative h-[310px] lg:h-[215px]"
                    >
                      <Image
                        placeholder={`data:image/svg+xml;base64,${toBase64(
                          shimmer(700, 475)
                        )}`}
                        width={1920}
                        height={1080}
                        src={indeksRight?.thumbnailLink}
                        alt="image"
                        className="w-full h-[310px] lg:h-[215px] rounded-lg "
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
                        <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
                          {indeksRight?.categoryName}
                        </span>
                        <Link href={`/indeks/detail/${indeksRight?.slug}`}>
                          <h2 className="text-xl font-bold mt-2">
                            {indeksRight?.title}
                          </h2>
                        </Link>
                        <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
                          {formatDateToIndonesian(
                            new Date(indeksRight?.createdAt)
                          )}{" "}
                          {indeksRight?.timezone
                            ? indeksRight?.timezone
                            : "WIB"}
                          |{" "}
                          {/* <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="1.2em"
                            height="1.2em"
                            viewBox="0 0 24 24"
                          >
                            <path
                              fill="currentColor"
                              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>{" "}
                          {indeksRight?.clickCount} */}
                        </p>
                      </div>
                    </div>
                  )
              )}
            </>
          )}
        </div>
      </div>

      {/* Bottom */}
      <div className="px-4 lg:px-7 py-4">
        {isLoading ? (
          <div className="flex flex-col space-y-3 w-full gap-10">
            <div className="flex flex-col lg:flex-row gap-5">
              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="flex flex-col lg:flex-row gap-5">
              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
            <div className="flex flex-col lg:flex-row gap-5">
              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-[250px]" />
                <Skeleton className="h-4 w-[200px]" />
              </div>
            </div>
          </div>
        ) : (
          <div className="flex flex-col gap-4">
            {indeksData?.map(
              (indeksBottom: any, index: number) =>
                index < 3 && (
                  <div
                    key={indeksBottom?.id}
                    className="flex flex-col md:flex-row items-start p-4 gap-4"
                  >
                    <Image
                      placeholder={`data:image/svg+xml;base64,${toBase64(
                        shimmer(700, 475)
                      )}`}
                      width={500}
                      height={250}
                      src={indeksBottom?.thumbnailLink}
                      alt=""
                      className="h-40 object-cover rounded-lg w-full lg:w-[550px] lg:h-[200px]"
                    />
                    <div className="flex flex-col justify-between w-full">
                      <p className="text-sm">{indeksBottom?.date}</p>
                      <Link
                        href={`/indeks/detail/${indeksBottom?.slug}`}
                        className="text-2xl font-semibold text-gray-800 dark:text-white"
                      >
                        {indeksBottom?.title}
                      </Link>
                      <p className="text-sm text-gray-600 dark:text-white mt-2">
                        {htmlToString(indeksBottom?.description)}
                      </p>
                    </div>
                  </div>
                )
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default Indeks;