80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
"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;
|