feat:curated-content
This commit is contained in:
parent
93912c6c8f
commit
146bd8d782
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
import { Link } from "@/components/navigation";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
|
|
@ -30,14 +31,6 @@ const AudioSliderPage = () => {
|
|||
initFetch();
|
||||
}, [page, limit, search]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (audioData?.length > 0) {
|
||||
// shuffleAndSetVideos();
|
||||
// const interval = setInterval(shuffleAndSetVideos, 5000);
|
||||
// return () => clearInterval(interval); // Cleanup interval on unmount
|
||||
// }
|
||||
// }, [audioData]);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await listCuratedContent(search, limit, page - 1, 4, "1");
|
||||
console.log(response);
|
||||
|
|
@ -48,11 +41,6 @@ const AudioSliderPage = () => {
|
|||
setDisplayAudio(contentData);
|
||||
};
|
||||
|
||||
// const shuffleAndSetVideos = () => {
|
||||
// const shuffled = shuffleArray([...audioData]);
|
||||
// setDisplayAudio(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));
|
||||
|
|
@ -62,18 +50,29 @@ const AudioSliderPage = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Carousel className="w-full pr-3">
|
||||
<CarouselContent>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/2 gap-3">
|
||||
{displayAudio?.map((audio: any) => (
|
||||
<div className="w-full px-2">
|
||||
{displayAudio.length > 0 && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-semibold">Audio</h2>
|
||||
<Link
|
||||
href={`/shared/curated-content//giat-routine/audio/detail/${audio.id}`}
|
||||
key={audio?.id}
|
||||
className="flex flex-col sm:flex-row items-center hover:scale-100 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
|
||||
href={"/shared/curated-content/giat-routine/video/all"}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
|
||||
>
|
||||
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-12 h-12">
|
||||
Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
|
||||
</Link>
|
||||
</div>
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
{displayAudio.map((audio, 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/audio/detail/${audio.id}`}
|
||||
>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-12 h-12 mx-3 my-3">
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
|
|
@ -93,8 +92,9 @@ const AudioSliderPage = () => {
|
|||
{audio?.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -102,6 +102,9 @@ const AudioSliderPage = () => {
|
|||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -574,35 +574,36 @@ export default function DetailAudio() {
|
|||
key={data.id}
|
||||
className="flex items-center gap-3 mt-2"
|
||||
>
|
||||
{/* <img
|
||||
className="object-cover w-20 h-20"
|
||||
src={data.thumbnailUrl} // Assuming `thumbnailUrl` is the property that contains the URL for the thumbnail image
|
||||
alt={`Thumbnail ${index}`}
|
||||
/> */}
|
||||
<Music className="object-cover w-32 h-32" />
|
||||
<div className="flex flex-wrap lg:flex-row gap-3 items-center">
|
||||
{/* Mabes Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "mabes"} // Automatically checks if placement matches
|
||||
disabled // To reflect read-only behavior
|
||||
checked={data.placements === "mabes"}
|
||||
disabled
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</label>
|
||||
|
||||
{/* Polda Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "polda"} // Automatically checks if placement matches
|
||||
checked={data.placements === "polda"}
|
||||
disabled
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</label>
|
||||
|
||||
{/* International Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"} // Automatically checks if placement matches
|
||||
checked={data.placements === "satker"}
|
||||
disabled
|
||||
/>
|
||||
<span>Satker</span>
|
||||
</label>
|
||||
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"}
|
||||
disabled
|
||||
/>
|
||||
<span>International</span>
|
||||
|
|
|
|||
|
|
@ -580,28 +580,33 @@ export default function DetailDocument() {
|
|||
alt={data.fileName}
|
||||
/>
|
||||
<div className="flex flex-wrap lg:flex-row gap-3 items-center">
|
||||
{/* Mabes Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "mabes"} // Automatically checks if placement matches
|
||||
disabled // To reflect read-only behavior
|
||||
checked={data.placements === "mabes"}
|
||||
disabled
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</label>
|
||||
|
||||
{/* Polda Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "polda"} // Automatically checks if placement matches
|
||||
checked={data.placements === "polda"}
|
||||
disabled
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</label>
|
||||
|
||||
{/* International Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"} // Automatically checks if placement matches
|
||||
checked={data.placements === "satker"}
|
||||
disabled
|
||||
/>
|
||||
<span>Satker</span>
|
||||
</label>
|
||||
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"}
|
||||
disabled
|
||||
/>
|
||||
<span>International</span>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
import { Link } from "@/components/navigation";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
|
|
@ -30,14 +31,6 @@ const TeksSliderPage = () => {
|
|||
initFetch();
|
||||
}, [page, limit, search]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (documentData?.length > 0) {
|
||||
// shuffleAndSetVideos();
|
||||
// const interval = setInterval(shuffleAndSetVideos, 5000);
|
||||
// return () => clearInterval(interval); // Cleanup interval on unmount
|
||||
// }
|
||||
// }, [documentData]);
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await listCuratedContent(search, limit, page - 1, 3, "1");
|
||||
console.log(response);
|
||||
|
|
@ -47,25 +40,26 @@ const TeksSliderPage = () => {
|
|||
setHasData(displayDocument && displayDocument.length > 0);
|
||||
setDisplayDocument(contentData);
|
||||
};
|
||||
// const shuffleAndSetVideos = () => {
|
||||
// const shuffled = shuffleArray([...documentData]);
|
||||
// setDisplayDocument(shuffled.slice(0, 2));
|
||||
// };
|
||||
|
||||
// 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 (
|
||||
<Carousel className="w-full pr-3">
|
||||
<div className="w-full px-2">
|
||||
{displayDocument.length > 0 && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-semibold">Teks</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>
|
||||
<CarouselItem>
|
||||
<div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/3 gap-3">
|
||||
{displayDocument?.map((document: any) => (
|
||||
{displayDocument.map((document, 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/document/detail/${document.id}`}
|
||||
key={document?.id}
|
||||
|
|
@ -88,9 +82,12 @@ const TeksSliderPage = () => {
|
|||
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
|
||||
{formatDateToIndonesian(new Date(document?.createdAt))}{" "}
|
||||
{formatDateToIndonesian(
|
||||
new Date(document?.createdAt)
|
||||
)}{" "}
|
||||
{document?.timezone ? document?.timezone : "WIB"} |{" "}
|
||||
<Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
<Icon icon="formkit:eye" width="15" height="15" />{" "}
|
||||
518
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
|
||||
{document?.title}
|
||||
|
|
@ -111,13 +108,17 @@ const TeksSliderPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -52,9 +52,7 @@ const ImageAllPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="ml-5 pb-3">
|
||||
<div className="flex justify-between items-center mx-3">
|
||||
<Label className="text-base">Image</Label>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mx-3"></div>
|
||||
<div className="px-5 my-5">
|
||||
<ImageSliderPage />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -540,13 +540,12 @@ export default function DetailImage() {
|
|||
{/* Mabes Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "mabes"} // Automatically checks if placement matches
|
||||
disabled // To reflect read-only behavior
|
||||
checked={data.placements === "mabes"}
|
||||
disabled
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</label>
|
||||
|
||||
{/* Polda Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "polda"}
|
||||
|
|
@ -555,7 +554,6 @@ export default function DetailImage() {
|
|||
<span>Wilayah</span>
|
||||
</label>
|
||||
|
||||
{/* Satker Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "satker"}
|
||||
|
|
@ -564,7 +562,6 @@ export default function DetailImage() {
|
|||
<span>Satker</span>
|
||||
</label>
|
||||
|
||||
{/* International Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"}
|
||||
|
|
|
|||
|
|
@ -10,111 +10,85 @@ import {
|
|||
} from "@/components/ui/carousel";
|
||||
import { listCuratedContent } from "@/service/curated-content/curated-content";
|
||||
|
||||
import {
|
||||
formatDateToIndonesian,
|
||||
generateLocalizedPath,
|
||||
textEllipsis,
|
||||
} from "@/utils/globals";
|
||||
import { formatDateToIndonesian } 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";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
type ImageData = {
|
||||
id: string;
|
||||
title: string;
|
||||
createdAt: string;
|
||||
timezone: string;
|
||||
thumbnailLink: string;
|
||||
clickCount: string;
|
||||
};
|
||||
|
||||
const ImageSliderPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [imageData, setImageData] = useState<any>();
|
||||
const [displayImage, setDisplayImage] = useState<any[]>([]);
|
||||
const [imageData, setImageData] = useState<ImageData[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = React.useState(10);
|
||||
const [search, setSearch] = React.useState("");
|
||||
const [limit] = useState(10);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, limit, search]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (imageData?.length > 0) {
|
||||
// shuffleAndSetVideos();
|
||||
// const interval = setInterval(shuffleAndSetVideos, 5000);
|
||||
// return () => clearInterval(interval); // Cleanup interval on unmount
|
||||
// }
|
||||
// }, [imageData]);
|
||||
}, [page]);
|
||||
|
||||
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 response = await listCuratedContent("", limit, page - 1, 1, "1");
|
||||
const data = response?.data?.data?.content || [];
|
||||
setImageData(data);
|
||||
};
|
||||
|
||||
// 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 (
|
||||
<Carousel className="w-full pr-3">
|
||||
<CarouselContent>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="p-1 flex flex-row md:basis-1/2 lg:basis-1/2 gap-3">
|
||||
{imageData?.map((image: any) => (
|
||||
<Card
|
||||
key={image?.id}
|
||||
className="hover:sc ale-110 transition-transform duration-300"
|
||||
>
|
||||
<div className="w-full px-2">
|
||||
{imageData.length > 0 && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-xl font-semibold">Foto</h2>
|
||||
<Link
|
||||
href={`/shared/curated-content//giat-routine/image/detail/${image.id}`}
|
||||
href={"/shared/curated-content/giat-routine/image/all"}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
|
||||
>
|
||||
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
Lihat Semua <Icon icon="lucide:arrow-right" className="ml-1" />
|
||||
</Link>
|
||||
</div>
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
{imageData.map((image, 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/image/detail/${image.id}`}
|
||||
>
|
||||
<CardContent className="p-0">
|
||||
<img
|
||||
src={image?.thumbnailLink}
|
||||
className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
|
||||
alt={image?.title}
|
||||
className="w-full h-56 object-cover rounded-t-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"
|
||||
<div className="p-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
{formatDateToIndonesian(
|
||||
new Date(image?.createdAt)
|
||||
)}{" "}
|
||||
{image?.timezone || "WIB"} |
|
||||
<Icon
|
||||
icon="formkit:eye"
|
||||
width="15"
|
||||
height="15"
|
||||
className="inline ml-1"
|
||||
/>
|
||||
</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?.clickCount}
|
||||
</p>
|
||||
<h3 className="font-semibold text-sm truncate">
|
||||
{image?.title}
|
||||
</h3>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Link>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -122,11 +96,9 @@ const ImageSliderPage = () => {
|
|||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
// <div className="mx-3 px-5">
|
||||
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
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";
|
||||
|
|
@ -15,9 +16,18 @@ 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 [displayVideos, setDisplayVideos] = useState<any[]>([]);
|
||||
const [videoData, setVideoData] = useState<VideoData[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = React.useState(10);
|
||||
const [search, setSearch] = React.useState("");
|
||||
|
|
@ -26,79 +36,64 @@ const VideoSliderPage = () => {
|
|||
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, 2, "1");
|
||||
console.log(response);
|
||||
|
||||
const data = response?.data?.data;
|
||||
const contentData = data?.content;
|
||||
setAllVideoData(contentData);
|
||||
setVideoData(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 (
|
||||
<Carousel className="w-full pr-3">
|
||||
<CarouselContent>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{allVideoData.map((video: any) => (
|
||||
<Card
|
||||
key={video?.id}
|
||||
className="hover:scale-110 transition-transform duration-300"
|
||||
<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="flex flex-col text-xs lg:text-sm w-full p-0">
|
||||
<CardContent className="p-0">
|
||||
<img
|
||||
src={video?.thumbnailLink}
|
||||
className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg"
|
||||
alt={video?.title}
|
||||
className="w-full h-56 object-cover rounded-t-lg"
|
||||
/>
|
||||
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
|
||||
{formatDateToIndonesian(new Date(video?.createdAt))}{" "}
|
||||
<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" />
|
||||
{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"
|
||||
<Icon
|
||||
icon="formkit:eye"
|
||||
width="15"
|
||||
height="15"
|
||||
className="inline ml-1"
|
||||
/>
|
||||
</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?.clickCount}
|
||||
</p>
|
||||
<h3 className="font-semibold text-sm truncate">
|
||||
{video?.title}
|
||||
</h3>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Link>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -106,6 +101,9 @@ const VideoSliderPage = () => {
|
|||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -523,39 +523,39 @@ export default function DetailImage() {
|
|||
key={data.id}
|
||||
className="flex items-center gap-3 mt-2"
|
||||
>
|
||||
{/* <img
|
||||
className="object-cover w-20 h-20"
|
||||
src={data.thumbnailUrl} // Assuming `thumbnailUrl` is the property that contains the URL for the thumbnail image
|
||||
alt={`Thumbnail ${index}`}
|
||||
/> */}
|
||||
<img
|
||||
className="object-cover w-20 h-20 lg:w-32 lg:h-32"
|
||||
src={"/assets/video-icon.webp"}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
<div className="flex flex-wrap lg:flex-row gap-3 items-center">
|
||||
{/* Mabes Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "mabes"} // Automatically checks if placement matches
|
||||
disabled // To reflect read-only behavior
|
||||
checked={data.placements === "mabes"}
|
||||
disabled
|
||||
/>
|
||||
<span>Nasional</span>
|
||||
</label>
|
||||
|
||||
{/* Polda Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "polda"} // Automatically checks if placement matches
|
||||
checked={data.placements === "polda"}
|
||||
disabled
|
||||
/>
|
||||
<span>Wilayah</span>
|
||||
</label>
|
||||
|
||||
{/* International Checkbox */}
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"} // Automatically checks if placement matches
|
||||
checked={data.placements === "satker"}
|
||||
disabled
|
||||
/>
|
||||
<span>Satker</span>
|
||||
</label>
|
||||
|
||||
<label className=" cursor-pointer flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={data.placements === "international"}
|
||||
disabled
|
||||
/>
|
||||
<span>International</span>
|
||||
|
|
|
|||
|
|
@ -73,80 +73,15 @@ const CuratedContentPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="ml-5 pb-3">
|
||||
<div className="flex justify-between items-center mx-3">
|
||||
<Label className="text-base">Audio Visual</Label>
|
||||
|
||||
<div className="flex items-center">
|
||||
<Label>
|
||||
{" "}
|
||||
<Link
|
||||
href={
|
||||
"/shared/curated-content/giat-routine/video/all"
|
||||
}
|
||||
>
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</Label>
|
||||
<ArrowRight size={18} className="text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 my-5">
|
||||
<VideoSliderPage />
|
||||
</div>
|
||||
<div className="flex justify-between items-center mx-3">
|
||||
<Label className="text-base">Audio</Label>
|
||||
<div className="flex items-center">
|
||||
<Label>
|
||||
{" "}
|
||||
<Link
|
||||
href={
|
||||
"/shared/curated-content/giat-routine/audio/all"
|
||||
}
|
||||
>
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</Label>
|
||||
<ArrowRight size={18} className="text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 my-5">
|
||||
<AudioSliderPage />
|
||||
</div>
|
||||
<div className="flex justify-between items-center mx-3">
|
||||
<Label className="text-base">Foto</Label>
|
||||
<div className="flex items-center">
|
||||
<Label>
|
||||
{" "}
|
||||
<Link
|
||||
href={
|
||||
"/shared/curated-content/giat-routine/image/all"
|
||||
}
|
||||
>
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</Label>
|
||||
<ArrowRight size={18} className="text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 my-5">
|
||||
<ImageSliderPage />
|
||||
</div>
|
||||
<div className="flex justify-between items-center mx-3">
|
||||
<Label className="text-base">Teks</Label>
|
||||
<div className="flex items-center">
|
||||
<Label>
|
||||
{" "}
|
||||
<Link
|
||||
href={
|
||||
"/shared/curated-content/giat-routine/document/all"
|
||||
}
|
||||
>
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</Label>
|
||||
<ArrowRight size={18} className="text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 my-5">
|
||||
<TeksSliderPage />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue