mediahub-fe/app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx

"use client";
import { Link } from "@/components/navigation";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { getListContent } from "@/service/landing/landing";
import {
  formatDateToIndonesian,
  generateLocalizedPath,
  textEllipsis,
} from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { Component, useEffect, useState } from "react";

const ImageSliderPage = () => {
  const [newContent, setNewContent] = useState<any>();
  const [selectedTab, setSelectedTab] = useState("video");
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;
  const type = "popular";
  useEffect(() => {
    initFetch();
  });
  const initFetch = async () => {
    const request = {
      sortBy: type == "popular" ? "favorite" : "createdAt",
      contentTypeId: "3",
    };
    const response = await getListContent(request);
    // console.log("category", response);
    setNewContent(response?.data?.data?.content);
  };
  return (
    <div className="mx-3 px-5">
      <Carousel>
        <CarouselContent>
          {newContent?.map((image: any) => (
            <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
              <Link
                href={generateLocalizedPath(
                  `/image/detail/${image?.id}`,
                  String(locale)
                )}
                className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
              >
                <img
                  src={image?.thumbnailLink}
                  className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300 rounded-md"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
                  <h1 className="text-sm font-semibold truncate">
                    {image?.title}
                  </h1>
                  <p className="flex flex-row items-center text-sm gap-2">
                    {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                    {image?.timezone ? image?.timezone : "WIB"}|{" "}
                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
                    {image?.clickCount}{" "}
                  </p>
                </div>
              </Link>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
};

export default ImageSliderPage;