112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
"use client";
|
|
import { Link } from "@/components/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { Label } from "@/components/ui/label";
|
|
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";
|
|
|
|
type VideoData = {
|
|
id: string;
|
|
title: string;
|
|
createdAt: string;
|
|
timezone: string;
|
|
thumbnailLink: string;
|
|
clickCount: string;
|
|
};
|
|
|
|
const VideoSliderPage = () => {
|
|
const [allVideoData, setAllVideoData] = useState<any[]>([]);
|
|
const [videoData, setVideoData] = useState<VideoData[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [limit, setLimit] = React.useState(10);
|
|
const [search, setSearch] = React.useState("");
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [page, limit, search]);
|
|
|
|
const fetchData = async () => {
|
|
const response = await listCuratedContent(search, limit, page - 1, 2, "1");
|
|
console.log(response);
|
|
|
|
const data = response?.data?.data;
|
|
const contentData = data?.content;
|
|
setVideoData(contentData);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full px-2">
|
|
{videoData.length > 0 && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h2 className="text-xl font-semibold">Video</h2>
|
|
<Link
|
|
href={"/shared/curated-content/giat-routine/video/all"}
|
|
className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
|
|
>
|
|
Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
|
|
</Link>
|
|
</div>
|
|
<Carousel className="w-full">
|
|
<CarouselContent>
|
|
{videoData.map((video, index) => (
|
|
<CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
|
|
<div className="p-2">
|
|
<Card className="shadow-md rounded-lg overflow-hidden">
|
|
<Link
|
|
href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
|
|
>
|
|
<CardContent className="p-0">
|
|
<img
|
|
src={video?.thumbnailLink}
|
|
alt={video?.title}
|
|
className="w-full h-56 object-cover rounded-t-lg"
|
|
/>
|
|
<div className="p-3">
|
|
<p className="text-xs text-gray-500">
|
|
{formatDateToIndonesian(
|
|
new Date(video?.createdAt)
|
|
)}{" "}
|
|
{video?.timezone || "WIB"} |
|
|
<Icon
|
|
icon="formkit:eye"
|
|
width="15"
|
|
height="15"
|
|
className="inline ml-1"
|
|
/>
|
|
{video?.clickCount}
|
|
</p>
|
|
<h3 className="font-semibold text-sm truncate">
|
|
{video?.title}
|
|
</h3>
|
|
</div>
|
|
</CardContent>
|
|
</Link>
|
|
</Card>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoSliderPage;
|