79 lines
2.7 KiB
TypeScript
79 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 } 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 VideoSliderPage = () => {
|
||
|
|
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" ? "clickCount" : "createdAt",
|
||
|
|
contentTypeId: "2",
|
||
|
|
};
|
||
|
|
const response = await getListContent(request);
|
||
|
|
console.log("category", response);
|
||
|
|
setNewContent(response?.data?.data?.content);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="mx-3 px-5">
|
||
|
|
<Carousel className="w-full max-w-7xl mx-auto ">
|
||
|
|
<CarouselContent>
|
||
|
|
{newContent?.map((video: any) => (
|
||
|
|
<CarouselItem
|
||
|
|
key={video?.id}
|
||
|
|
className="md:basis-1/2 lg:basis-1/3 "
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={generateLocalizedPath(
|
||
|
|
`/video/detail/${video?.id}`,
|
||
|
|
String(locale)
|
||
|
|
)}
|
||
|
|
className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={video?.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">
|
||
|
|
{video?.title}
|
||
|
|
</h1>
|
||
|
|
<p className="flex flex-row items-center text-sm gap-2">
|
||
|
|
{formatDateToIndonesian(new Date(video?.createdAt))}{" "}
|
||
|
|
{video?.timezone ? video?.timezone : "WIB"} |{" "}
|
||
|
|
<Icon icon="formkit:eye" width="15" height="15" />{" "}
|
||
|
|
{video.clickCount}{" "}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</CarouselItem>
|
||
|
|
))}
|
||
|
|
</CarouselContent>
|
||
|
|
<CarouselPrevious />
|
||
|
|
<CarouselNext />
|
||
|
|
</Carousel>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VideoSliderPage;
|