diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index fcc00b66..444b198f 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -5,9 +5,11 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import Link from "next/link"; import { useParams, usePathname, useRouter } from "next/navigation"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Icon } from "@iconify/react/dist/iconify.js"; import { textEllipsis } from "@/utils/globals"; +import { getDetail } from "@/service/landing/landing"; +import NewContent from "@/components/landing-page/new-content"; const dummyImage = [ { id: 1, thumbnail: "/assets/banner-sample.png" }, @@ -55,7 +57,19 @@ const DetailInfo = () => { const router = useRouter(); const pathname = usePathname(); const params = useParams(); - const locale = params?.locale; + const slug = params?.slug; + const [detailDataImage, setDetailDataImage] = useState(); + const [selectedImage, setSelectedImage] = useState(0); + + useEffect(() => { + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailImage", response); + setDetailDataImage(response?.data?.data); + }; const sizes = [ { label: "XL", value: "3198 x 1798 px" }, @@ -73,19 +87,16 @@ const DetailInfo = () => {
{/* Gambar Utama */}
- Main + Main
- {/* Thumbnail */} + {/* Gambar bawah Kecil */}
- {[1, 2, 3, 4].map((_, index) => ( - {`Thumbnail + {detailDataImage?.files?.map((file: any, index: number) => ( + setSelectedImage(index)} key={file?.id}> + + ))}
@@ -102,12 +113,13 @@ const DetailInfo = () => {
- OPS MANTAP PRAJA & PILKADA 2024 + {detailDataImage?.category?.name}
-

poldajabar

-

pilkadamai2024

+ {detailDataImage?.tags?.split(",").map((tag: string) => ( +

{tag}

+ ))}
@@ -122,7 +134,7 @@ const DetailInfo = () => { ))} @@ -149,15 +161,16 @@ const DetailInfo = () => { {/* Footer Informasi */}

- oleh {dummyData.createdBy} | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65 + oleh {detailDataImage?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataImage?.updatedAt} WIB | {" "} + {detailDataImage?.clickCount}

-

Kreator: poppy-PID-poldajabar

+

Kreator: {detailDataImage?.creatorName}

{/* Keterangan */}
-

{dummyData.title}

-
+

{detailDataImage?.title}

+
{/* Comment */} @@ -168,160 +181,8 @@ const DetailInfo = () => {
{/* Konten Serupa */} -
-
-
-

- Konten Terbaru -

- - - - Audio Visual - - - Audio - - - Foto - - - Teks - - - -
-
- {selectedTab == "video" ? ( - - - {dummyImageContent.map((image) => ( - - -
- {image.date} {image.time} | 518{" "} - - - {" "} -
-
{image.title}
- - ))} - - - - - ) : selectedTab == "audio" ? ( - - - {dummyDescription.map((description) => ( - - - - ))} - - - - - ) : selectedTab == "image" ? ( - - - {dummyImageContent.map((image) => ( - - -
- {image.date} {image.time} | 518{" "} - - - {" "} -
-
{image.title}
- - ))} - - - - - ) : ( - - - {dummyImageContent.map((description) => ( - - - - ))} - - - - - )} -
-
-
- - LIHAT SEMUA - -
+
+
); diff --git a/app/[locale]/(public)/indeks/page.tsx b/app/[locale]/(public)/indeks/page.tsx index f1f2854f..ef42eae2 100644 --- a/app/[locale]/(public)/indeks/page.tsx +++ b/app/[locale]/(public)/indeks/page.tsx @@ -2,6 +2,7 @@ import { getIndeksData } from "@/service/landing/landing"; import { formatDateToIndonesian } from "@/utils/globals"; +import { Lectern } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import React, { useEffect, useState } from "react"; @@ -9,6 +10,20 @@ import React, { useEffect, useState } from "react"; const Indeks: React.FC = () => { const pathname = usePathname(); const [indeksData, setIndeksData] = useState(); + const [currentImageIndex, setCurrentImageIndex] = useState(0); + let count: number = 0; + useEffect(() => { + if (indeksData) { + const intervalId = setInterval(() => { + // const asal = currentImageIndex + 1; + // setCurrentImageIndex(asal); + count = (count + 1) % indeksData.length; + }, 5000); + + return () => clearInterval(intervalId); + } + }, [indeksData]); + useEffect(() => { initFetch(); }, []); @@ -23,72 +38,81 @@ const Indeks: React.FC = () => { {/* Hero Left */}
- {indeksData?.map((indeks: any) => ( -
- image -
- {indeks?.categoryName} - -

{indeks?.title}

- -

- {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "} - - - {" "} - {indeks?.clickCount} -

-
-
- ))} + {indeksData?.map( + (indeks: any, index: number) => + index == count && ( +
+ image +
+ {indeks?.categoryName} + +

{indeks?.title}

+ +

+ {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "} + + + {" "} + {indeks?.clickCount} +

+
+
+ ) + )}
{/* Hero Right */} - {/*
- {indeksData?.map((indeksRight: any) => ( -
- image -
- {indeksRight?.categoryName} - -

{indeksRight?.title}

- -

- {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "} - - - {" "} - {indeksRight?.clickCount} -

-
-
- ))} -
*/} +
+ {indeksData?.map( + (indeksRight: any, index: number) => + (index == count + 1 || index == count + 2) && ( +
+ image +
+ {indeksRight?.categoryName} + +

{indeksRight?.title}

+ +

+ {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "} + + + {" "} + {indeksRight?.clickCount} +

+
+
+ ) + )} +
{/* Bottom */} - {/*
+
- {indeksData?.map((indeksBottom: any) => ( -
- -
-

{indeksBottom?.date}

- - {indeksBottom?.title} - -

{indeksBottom?.description}

-
-
- ))} + {indeksData?.map( + (indeksBottom: any, index: number) => + index < 3 && ( +
+ +
+

{indeksBottom?.date}

+ + {indeksBottom?.title} + +

{indeksBottom?.description}

+
+
+ ) + )}
-
*/} +
); }; diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx index 371a1fce..d828c38b 100644 --- a/app/[locale]/(public)/schedule/page.tsx +++ b/app/[locale]/(public)/schedule/page.tsx @@ -286,35 +286,35 @@ const Schedule = () => { Time Table - + changePrevWeek()}> {" "} -
-

{dateAWeek[0]?.split("-")[2]}

+
+

{dateAWeek[0]?.split("-")[2]}

Monday

- -
{dateAWeek[1]?.split("-")[2]}
Tuesday + +
{dateAWeek[1]?.split("-")[2]}
Tuesday - -
{dateAWeek[2]?.split("-")[2]}
Wednesday + +
{dateAWeek[2]?.split("-")[2]}
Wednesday - -
{dateAWeek[3]?.split("-")[2]}
Thursday + +
{dateAWeek[3]?.split("-")[2]}
Thursday - -
{dateAWeek[4]?.split("-")[2]}
Friday + +
{dateAWeek[4]?.split("-")[2]}
Friday - -
{dateAWeek[5]?.split("-")[2]}
Saturday + +
{dateAWeek[5]?.split("-")[2]}
Saturday - +
-

{dateAWeek[6]?.split("-")[2]}

+

{dateAWeek[6]?.split("-")[2]}

Sunday

changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center"> diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx index 9c135339..5d2dbb28 100644 --- a/app/[locale]/(public)/video/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx @@ -5,28 +5,12 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import Link from "next/link"; import { useParams, usePathname, useRouter } from "next/navigation"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { Icon } from "@iconify/react/dist/iconify.js"; import { textEllipsis } from "@/utils/globals"; - -const dummyImage = [ - { id: 1, thumbnail: "/assets/banner-sample.png" }, - { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018" }, - { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018" }, - { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018" }, - { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" }, -]; - -const dummyData = { - id: 12312, - title: "TITLE", - createdBy: "Mabes", - createdAt: "21-21-2021", - time: "18:23", - desc: "sdaasd", - htmlDescription: - '

Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.

Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.

"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.

Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.

“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.

', -}; +import { getDetail } from "@/service/landing/landing"; +import VideoPlayer from "@/utils/video-player"; +import NewContent from "@/components/landing-page/new-content"; const dummyImageContent = [ { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, @@ -55,7 +39,18 @@ const DetailVideo = () => { const router = useRouter(); const pathname = usePathname(); const params = useParams(); - const locale = params?.locale; + const slug = params?.slug; + const [detailDataVideo, setDetailDataVideo] = useState(); + + useEffect(() => { + initFetch(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailVideo", response); + setDetailDataVideo(response?.data?.data); + }; const sizes = [ { label: "XL", value: "3198 x 1798 px" }, @@ -73,21 +68,9 @@ const DetailVideo = () => {
{/* Gambar Utama */}
- Main +
- - {/* Thumbnail */} -
- {[1, 2, 3, 4].map((_, index) => ( - {`Thumbnail - ))} -
{/* Bagian Kanan */} @@ -102,7 +85,7 @@ const DetailVideo = () => {
- OPS MANTAP PRAJA & PILKADA 2024 + {detailDataVideo?.category?.name}
@@ -149,15 +132,16 @@ const DetailVideo = () => { {/* Footer Informasi */}

- oleh {dummyData.createdBy} | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65 + oleh {detailDataVideo?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataVideo?.updatedAt} WIB | {" "} + {detailDataVideo?.clickCount}

-

Kreator: poppy-PID-poldajabar

+

Kreator: {detailDataVideo?.creatorName}

{/* Keterangan */}
-

{dummyData.title}

-
+

{detailDataVideo?.title}

+
{/* Comment */} @@ -168,160 +152,8 @@ const DetailVideo = () => {
{/* Konten Serupa */} -
-
-
-

- Konten Terbaru -

- - - - Audio Visual - - - Audio - - - Foto - - - Teks - - - -
- -
-
- - LIHAT SEMUA - -
+
+
); diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx index 97b37c80..32de0068 100644 --- a/components/landing-page/content-category.tsx +++ b/components/landing-page/content-category.tsx @@ -1,6 +1,7 @@ import { getCategoryData } from "@/service/landing/landing"; import Link from "next/link"; import React, { useEffect, useState } from "react"; +import { Button } from "../ui/button"; const ContentCategory = () => { const [categories, setCategories] = useState(); @@ -24,19 +25,32 @@ const ContentCategory = () => {
- {categories?.map((category: any) => ( - - -
-

{category?.name}

-
- - ))} + {categories?.map((category: any, index: number) => + !seeAllValue ? ( + index < 8 ? ( + + +
+

{category?.name}

+
+ + ) : ( + "" + ) + ) : ( + + +
+

{category?.name}

+
+ + ) + )}
- - LIHAT SEMUA - +
); diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index ee6bd654..1d44516f 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -7,6 +7,8 @@ import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi"; import { useParams, usePathname, useRouter } from "next/navigation"; import { generateLocalizedPath } from "@/utils/globals"; import { Link } from "@/i18n/routing"; +import { cn } from "@/lib/utils"; +import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"; const Navbar = () => { const [menuOpen, setMenuOpen] = useState(false); @@ -24,7 +26,7 @@ const Navbar = () => { return (
-
+
{/* Logo */} Media Hub Logo @@ -45,7 +47,7 @@ const Navbar = () => { {/* Desktop Navigation */}
- + {/* @@ -86,8 +88,86 @@ const Navbar = () => { - - + */} + + {/* Nav Menu */} + + + + + + + + + Konten + + + + router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white"> + + + Video + + + router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> + + + Audio + + + router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> + + + Foto + + + router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white"> + + + Teks + + + + + + + + + + + + + Jadwal + + + + + + + + + + + + Indeks + + + + + + + {/* { Jadwal - + */} + {/* @@ -109,7 +190,7 @@ const Navbar = () => { Jadwal */} - + {/* { Indeks - + */} Live @@ -131,6 +212,7 @@ const Navbar = () => {
+
{/* Tombol Utama */}