98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
"use client";
|
|
import { Link } from "@/components/navigation";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { listCuratedContent } from "@/service/curated-content/curated-content";
|
|
import { getListContent } from "@/service/landing/landing";
|
|
import { formatDateToIndonesian } from "@/utils/globals";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import image from "next/image";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
const VideoSliderPage = () => {
|
|
const [allVideoData, setAllVideoData] = useState<any[]>([]);
|
|
const [displayVideos, setDisplayVideos] = 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 (allVideoData?.length > 0) {
|
|
shuffleAndSetVideos();
|
|
const interval = setInterval(shuffleAndSetVideos, 5000);
|
|
return () => clearInterval(interval); // Cleanup interval on unmount
|
|
}
|
|
}, [allVideoData]);
|
|
|
|
const fetchData = async () => {
|
|
const response = await listCuratedContent(search, limit, page - 1, 1, "2");
|
|
console.log(response);
|
|
|
|
const data = response?.data?.data;
|
|
const contentData = data?.content;
|
|
setAllVideoData(contentData);
|
|
};
|
|
|
|
const shuffleAndSetVideos = () => {
|
|
const shuffled = shuffleArray([...allVideoData]);
|
|
setDisplayVideos(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">
|
|
{displayVideos.map((video: any) => (
|
|
<Card
|
|
key={video?.id}
|
|
className="hover:scale-110 transition-transform duration-300"
|
|
>
|
|
<Link
|
|
href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
|
|
>
|
|
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
|
<img
|
|
src={video?.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(video?.createdAt))}{" "}
|
|
{video?.timezone || "WIB"} |
|
|
<Icon icon="formkit:eye" width="15" height="15" />
|
|
{video?.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">
|
|
{video?.title}
|
|
</div>
|
|
</CardContent>
|
|
</Link>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoSliderPage;
|