121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
"use client";
|
|
import { Link } from "@/components/navigation";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { listCuratedContent } from "@/service/curated-content/curated-content";
|
|
|
|
import {
|
|
formatDateToIndonesian,
|
|
generateLocalizedPath,
|
|
textEllipsis,
|
|
} from "@/utils/globals";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import {
|
|
SortingState,
|
|
ColumnFiltersState,
|
|
VisibilityState,
|
|
PaginationState,
|
|
} from "@tanstack/react-table";
|
|
import {
|
|
useParams,
|
|
usePathname,
|
|
useRouter,
|
|
useSearchParams,
|
|
} from "next/navigation";
|
|
import React, { Component, useEffect, useState } from "react";
|
|
|
|
const ImageSliderPage = () => {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [imageData, setImageData] = useState<any>();
|
|
const [displayImage, setDisplayImage] = useState<any[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [limit, setLimit] = React.useState(10);
|
|
const [search, setSearch] = React.useState("");
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [page, limit, search]);
|
|
|
|
useEffect(() => {
|
|
if (imageData?.length > 0) {
|
|
shuffleAndSetVideos();
|
|
const interval = setInterval(shuffleAndSetVideos, 5000);
|
|
return () => clearInterval(interval); // Cleanup interval on unmount
|
|
}
|
|
}, [imageData]);
|
|
|
|
const fetchData = async () => {
|
|
const response = await listCuratedContent(search, limit, page - 1, 1, "1");
|
|
console.log(response);
|
|
|
|
const data = response?.data?.data;
|
|
const contentData = data?.content;
|
|
setImageData(contentData);
|
|
};
|
|
|
|
const shuffleAndSetVideos = () => {
|
|
const shuffled = shuffleArray([...imageData]);
|
|
setDisplayImage(shuffled.slice(0, 3));
|
|
};
|
|
|
|
const shuffleArray = (array: any[]) => {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
return array;
|
|
};
|
|
return (
|
|
<div className="mx-3 px-5">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{displayImage?.map((image: any) => (
|
|
<Card
|
|
key={image?.id}
|
|
className="hover:sc ale-110 transition-transform duration-300"
|
|
>
|
|
<Link
|
|
href={`/shared/curated-content//giat-routine/image/detail/${image.id}`}
|
|
>
|
|
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
|
<img
|
|
src={image?.thumbnailLink}
|
|
className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
|
|
/>
|
|
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
|
|
{formatDateToIndonesian(new Date(image?.createdAt))}{" "}
|
|
{image?.timezone ? image?.timezone : "WIB"}|{" "}
|
|
<Icon icon="formkit:eye" width="15" height="15" />
|
|
{image?.clickCount}{" "}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fill="#f00"
|
|
d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
|
|
/>
|
|
</svg>{" "}
|
|
</div>
|
|
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
|
|
{image?.title}
|
|
</div>
|
|
</CardContent>
|
|
</Link>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ImageSliderPage;
|