From 77a0bfd08430a93423b3cb7b5f0a6f02fccfb22d Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Mon, 2 Dec 2024 17:30:56 +0700 Subject: [PATCH] feat: add detail of image audio and document pages --- app/[locale]/audio/filter/page.tsx | 183 +++++++++++++++++++++ app/[locale]/document/filter/page.tsx | 189 ++++++++++++++++++++++ app/[locale]/image/detail/[slug]/page.tsx | 26 +-- app/[locale]/image/filter/page.tsx | 45 ++++-- app/[locale]/video/filter/page.tsx | 172 ++++++++++++++++++++ components/landing-page/KontenTerbaru.tsx | 127 +++++++++++---- components/landing-page/Navbar.tsx | 7 +- components/landing-page/NewsBottom.tsx | 117 ++++++++++++++ components/landing-page/NewsTicker.tsx | 9 -- package-lock.json | 2 +- package.json | 2 +- public/assets/audio-black.svg | 3 + public/assets/document.svg | 3 + public/assets/wave.svg | 53 ++++++ tsconfig.json | 2 +- 15 files changed, 870 insertions(+), 70 deletions(-) create mode 100644 app/[locale]/audio/filter/page.tsx create mode 100644 app/[locale]/document/filter/page.tsx create mode 100644 app/[locale]/video/filter/page.tsx create mode 100644 components/landing-page/NewsBottom.tsx delete mode 100644 components/landing-page/NewsTicker.tsx create mode 100644 public/assets/audio-black.svg create mode 100644 public/assets/document.svg create mode 100644 public/assets/wave.svg diff --git a/app/[locale]/audio/filter/page.tsx b/app/[locale]/audio/filter/page.tsx new file mode 100644 index 00000000..45a8e560 --- /dev/null +++ b/app/[locale]/audio/filter/page.tsx @@ -0,0 +1,183 @@ +"use client"; +import React, { useState } from "react"; +import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; + +const dummyDescription = [ + { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, +]; + +const categories = [ + { id: 1, title: "HUT HUMAS KE - 73" }, + { id: 2, title: "OPERASI ZEBRA 2024" }, + { id: 3, title: "PON XXI" }, + { id: 4, title: "OPS LILIN NATARU 2024" }, + { id: 5, title: "HUT HUMAS KE - 72" }, + { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, + { id: 6, title: "OPS KETUPAT 2024" }, + { id: 6, title: "OPS PATUH 2024" }, + { id: 6, title: "HARI JUANG POLRI" }, + { id: 6, title: "HUT RI KE-79" }, + { id: 6, title: "HARI BHAYANGKARA KE-78" }, +]; + +const formatAudio = [ + { id: 1, title: "WAV" }, + { id: 2, title: "MP3" }, +]; + +const FilterPage = () => { + return ( +
+ {/* Header */} +
+

+ {" "} + Audio {">"} Semua Audio +

+

|

+

Terdapat 32499 artikel berisi Audio yang dapat diunduh

+
+ {/* Left */} +
+ {/* Sidebar Kiri */} +
+

Filter

+
+ {/* Pencarian */} +
+ + +
+ + {/* Tahun & Bulan */} +
+ + +
+ + {/* Tanggal */} +
+ + +
+ + {/* Kategori */} +
+

Kategori

+
    + {categories.map((category) => ( +
  • + +
    • + ))} +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

Format Foto

+
    + {formatAudio.map((format) => ( +
  • + +
    • + ))} +
+
+
+
+ + {/* Konten Kanan */} +
+
+

Urutkan berdasarkan

+ +
+ {/* Card */} +
+ {dummyDescription.map((description) => ( + +
+ + + +
+ +
+
+ {description.date} | 518 +
+
{description.title}
+
+
+
+ +
+
+ # +
{description.duration}
+ + + +
+
+ + ))} +
+
+
+ + + + + + + 1 + + + + 2 + + + + 3 + + + + + + + + + +
+ ); +}; + +export default FilterPage; diff --git a/app/[locale]/document/filter/page.tsx b/app/[locale]/document/filter/page.tsx new file mode 100644 index 00000000..8af5ce0b --- /dev/null +++ b/app/[locale]/document/filter/page.tsx @@ -0,0 +1,189 @@ +"use client"; +import React, { useState } from "react"; +import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; + +const dummyDescription = [ + { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 7, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 8, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 9, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 10, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 11, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 12, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 13, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 14, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, +]; + +const categories = [ + { id: 1, title: "HUT HUMAS KE - 73" }, + { id: 2, title: "OPERASI ZEBRA 2024" }, + { id: 3, title: "PON XXI" }, + { id: 4, title: "OPS LILIN NATARU 2024" }, + { id: 5, title: "HUT HUMAS KE - 72" }, + { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, + { id: 6, title: "OPS KETUPAT 2024" }, + { id: 6, title: "OPS PATUH 2024" }, + { id: 6, title: "HARI JUANG POLRI" }, + { id: 6, title: "HUT RI KE-79" }, + { id: 6, title: "HARI BHAYANGKARA KE-78" }, +]; + +const formatAudio = [ + { id: 1, title: "DOC" }, + { id: 2, title: "DOCX" }, + { id: 3, title: "PDF" }, + { id: 4, title: "PPT" }, + { id: 5, title: "PPTX" }, +]; + +const DocumentPage = () => { + return ( +
+ {/* Header */} +
+

+ {" "} + Teks {">"} Semua Teks +

+

|

+

Terdapat 32499 artikel berisi Teks yang dapat diunduh

+
+ {/* Left */} +
+ {/* Sidebar Kiri */} +
+

Filter

+
+ {/* Pencarian */} +
+ + +
+ + {/* Tahun & Bulan */} +
+ + +
+ + {/* Tanggal */} +
+ + +
+ + {/* Kategori */} +
+

Kategori

+
    + {categories.map((category) => ( +
  • + +
    • + ))} +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

Format Foto

+
    + {formatAudio.map((format) => ( +
  • + +
    • + ))} +
+
+
+
+ + {/* Konten Kanan */} +
+
+

Urutkan berdasarkan

+ +
+ + {/* Card */} +
+ {dummyDescription.map((description) => ( + +
+ + + +
+ +
+
+ {description.date} | 518 +
+
{description.title}
+
+ + + + Download Dokumen +
+
+ + ))} +
+
+
+ + + + + + + 1 + + + + 2 + + + + 3 + + + + + + + + + +
+ ); +}; + +export default DocumentPage; diff --git a/app/[locale]/image/detail/[slug]/page.tsx b/app/[locale]/image/detail/[slug]/page.tsx index 14724d8f..0249618d 100644 --- a/app/[locale]/image/detail/[slug]/page.tsx +++ b/app/[locale]/image/detail/[slug]/page.tsx @@ -15,6 +15,18 @@ const dummyImage = [ { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" }, ]; + +const dummyData={ + id:12312, + title:"ahahah", + 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.

", + +} + const DetailInfo = () => { const [selectedSize, setSelectedSize] = useState("L"); const [selectedTab, setSelectedTab] = useState("video"); @@ -113,22 +125,16 @@ const DetailInfo = () => { {/* Footer Informasi */}

- oleh MABES POLRI | Diupdate pada 29/11/2024 11:15 WIB | 👁️ 65 + oleh {dummyData.createdBy} | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65

Kreator: poppy-PID-poldajabar

{/* Keterangan */}
-

Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan

-

- Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan Kota Bogot - Kapolresta Bogor Kota Kombes Bismo Teguh Prakoso melaksanakan pengecekan gudang logistik PPK Bogor Tengah di Gedung Wanita Jl. Jend. Soedirman Kota Bogor, - Kamis (28/11/2024). "Pengecekan ini untuk memastikan bahwa proses pergeseran Kotak Suara ke Kecamatan berjalan aman dan lancar serta situasi pasca pencoblosan kondusif dan proses pengiriman logistik pemilu 2024 dari PPS ke Gudang - penyimpanan Logistik PPK Bogor Tengah sudah selesai lengkap, lancar dan aman," ucapnya. Selanjutnya kotak suara di gudang Penyimpanan Logistik PPK dilakukan pengamanan selama 1x24 jam dari Personel Polsek Bogor Tengah. Kapolesta - Bogor Kota juga menekankan kepada personel yang berjaga di Gudang Logistik agar benar-benar memperhatikan keamanan kotak suara guna mengantisipasi adanya sabotase. "Dalam pengecekan tersebut ada beberapa hal yang di tekankan - diantaranya pada saat penghitungan yang masuk ke dalam ruangan wajib menggunakan id card, lembaran blangko yang sudah tidak terpakai harap di simpan dengan baik, pastikan kotak suara dalam keadaan aman dan lakukan patroli rutin di - sekitar gudang serta tetap waspada dan jaga kesehatan," pungkasnya. -

+

{dummyData.title}

+
+
{/* Comment */} diff --git a/app/[locale]/image/filter/page.tsx b/app/[locale]/image/filter/page.tsx index be105044..9387cf43 100644 --- a/app/[locale]/image/filter/page.tsx +++ b/app/[locale]/image/filter/page.tsx @@ -3,14 +3,18 @@ import React, { useState } from "react"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; 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" }, - { id: 6, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" }, + { 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" }, + { id: 2, 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" }, + { id: 3, 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" }, + { id: 4, 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" }, + { id: 5, 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" }, + { id: 6, 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" }, + { id: 7, 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" }, + { id: 8, 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" }, + { id: 9, 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" }, ]; const categories = [ @@ -19,17 +23,20 @@ const categories = [ { id: 3, title: "PON XXI" }, { id: 4, title: "OPS LILIN NATARU 2024" }, { id: 5, title: "HUT HUMAS KE - 72" }, - { id: 6, title: "OPS MANTAP PRAJA & PILKADA" } -] - + { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, + { id: 7, title: "OPS KETUPAT 2024" }, + { id: 8, title: "OPS PATUH 2024" }, + { id: 9, title: "HARI JUANG POLRI" }, + { id: 10, title: "HUT RI KE-79" }, + { id: 11, title: "HARI BHAYANGKARA KE-78" }, +]; const formatPicture = [ { id: 1, title: "PNG" }, { id: 2, title: "JPEG" }, { id: 3, title: "JPG" }, -] +]; const FilterPage = () => { - return (
{/* Header */} @@ -101,7 +108,6 @@ const FilterPage = () => { ))}
-
@@ -111,15 +117,22 @@ const FilterPage = () => {

Urutkan berdasarkan

{dummyImage.map((image) => ( - - - + + + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
 ))} diff --git a/app/[locale]/video/filter/page.tsx b/app/[locale]/video/filter/page.tsx new file mode 100644 index 00000000..eaf36ee5 --- /dev/null +++ b/app/[locale]/video/filter/page.tsx @@ -0,0 +1,172 @@ +"use client"; +import React, { useState } from "react"; +import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; +import { Card, CardContent } from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; + +const dummyImage = [ + { 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" }, + { id: 2, 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" }, + { id: 3, 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" }, + { id: 4, 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" }, + { id: 5, 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" }, + { id: 6, 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" }, + { id: 7, 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" }, + { id: 8, 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" }, + { id: 9, 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" }, +]; + +const categories = [ + { id: 1, title: "HUT HUMAS KE - 73" }, + { id: 2, title: "OPERASI ZEBRA 2024" }, + { id: 3, title: "PON XXI" }, + { id: 4, title: "OPS LILIN NATARU 2024" }, + { id: 5, title: "HUT HUMAS KE - 72" }, + { id: 6, title: "OPS MANTAP PRAJA & PILKADA 2024" }, + { id: 6, title: "OPS KETUPAT 2024" }, + { id: 6, title: "OPS PATUH 2024" }, + { id: 6, title: "HARI JUANG POLRI" }, + { id: 6, title: "HUT RI KE-79" }, + { id: 6, title: "HARI BHAYANGKARA KE-78" }, +]; +const formatPicture = [ + { id: 1, title: "MK4" }, + { id: 2, title: "MOV" }, + { id: 3, title: "MP4" }, + { id: 3, title: "AVI" }, + { id: 3, title: "WMV" }, +]; + +const FilterPage = () => { + return ( +
+ {/* Header */} +
+

+ {" "} + Audio Visual {">"} Semua Audio Visual +

+

|

+

Terdapat 32499 artikel berisi Audio Visual yang dapat diunduh

+
+ {/* Left */} +
+ {/* Sidebar Kiri */} +
+

Filter

+
+ {/* Pencarian */} +
+ + +
+ + {/* Tahun & Bulan */} +
+ + +
+ + {/* Tanggal */} +
+ + +
+ + {/* Kategori */} +
+

Kategori

+
    + {categories.map((category) => ( +
  • + +
    • + ))} +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

Format Foto

+
    + {formatPicture.map((format) => ( +
  • + +
    • + ))} +
+
+
+
+ + {/* Konten Kanan */} +
+
+

Urutkan berdasarkan

+ +
+ +
+ {dummyImage.map((image) => ( + + + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
+ + + ))} +
+
+
+ + + + + + + 1 + + + + 2 + + + + 3 + + + + + + + + + +
+ ); +}; + +export default FilterPage; diff --git a/components/landing-page/KontenTerbaru.tsx b/components/landing-page/KontenTerbaru.tsx index 42a03b16..aa615b3d 100644 --- a/components/landing-page/KontenTerbaru.tsx +++ b/components/landing-page/KontenTerbaru.tsx @@ -4,13 +4,27 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious import { Card, CardContent } from "../ui/card"; import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; +import { Icon } from "@iconify/react/dist/iconify.js"; 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" }, + { 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" }, + { id: 2, 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" }, + { id: 3, 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" }, + { id: 4, 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" }, + { id: 5, 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" }, + { id: 6, 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" }, + { id: 7, 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" }, + { id: 8, 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" }, + { id: 9, 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" }, +]; + +const dummyDescription = [ + { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, ]; const KontenTerbaru = () => { @@ -48,11 +62,14 @@ const KontenTerbaru = () => { {dummyImage.map((image) => ( - - - - - + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
 ))} @@ -62,13 +79,42 @@ const KontenTerbaru = () => { ) : selectedTab == "audio" ? ( - {dummyImage.map((image) => ( - - - - - - + {dummyDescription.map((description) => ( + + ))} @@ -80,11 +126,14 @@ const KontenTerbaru = () => { {dummyImage.map((image) => ( - router.push(`${pathname}/image/detail/${image.id}`)}> - - - - + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
 ))} @@ -94,13 +143,33 @@ const KontenTerbaru = () => { ) : ( - {dummyImage.map((image) => ( - - - - - - + {dummyImage.map((description) => ( + + ))} diff --git a/components/landing-page/Navbar.tsx b/components/landing-page/Navbar.tsx index d9751034..162406ab 100644 --- a/components/landing-page/Navbar.tsx +++ b/components/landing-page/Navbar.tsx @@ -51,13 +51,13 @@ const Navbar = () => { - + router.push(`${pathname}/video/filter`)} className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"> Audio Visual - + router.push(`${pathname}/audio/filter`)} className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"> Audio @@ -69,13 +69,14 @@ const Navbar = () => { Foto - + router.push(`${pathname}/document/filter`)} className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"> Teks + {/* */} diff --git a/components/landing-page/NewsBottom.tsx b/components/landing-page/NewsBottom.tsx new file mode 100644 index 00000000..ab289ce5 --- /dev/null +++ b/components/landing-page/NewsBottom.tsx @@ -0,0 +1,117 @@ +import React, { useEffect, useRef, useState } from "react"; +import NewsTicker from "react-advanced-news-ticker" +import { CarouselItem } from "../ui/carousel"; + + +// Definisikan tipe data untuk carousel item +interface CarouselItem { + id: number; + title: string; + name?: string; + slug: string; + fileType?: { + id: number; + }; + createdAt: string; +} + +const NewsBottom: React.FC = () => { + const [content, setContent] = useState([]); + const newsTickerRef = useRef(null); + + useEffect(() => { + async function fetchCarouselData() { + try { + const response = await CarouselItem(); + setContent(response.data?.data || []); + console.log("Carousel data:", response.data?.data); + } catch (error) { + console.error("Error fetching carousel data:", error); + } + } + + fetchCarouselData(); + }, []); + + function formatDateIndonesianWithTime(dateString: string): string { + const options: Intl.DateTimeFormatOptions = { + year: "numeric", + month: "long", + day: "numeric", + hour: "numeric", + minute: "numeric", + }; + + const formattedDate = new Date(dateString).toLocaleDateString("id-ID", options); + + return formattedDate.replace("pukul", "-"); + } + + const dummyNews: CarouselItem[] = Array.from({ length: 10 }, (_, index) => ({ + id: index + 1, + title: `Berita ${index + 1}`, + name: `Penulis ${index + 1}`, + slug: "", + createdAt: new Date().toISOString(), + })); + + return ( +
+
Breaking News
+
+ {content.length > 0 ? ( + + {content.map((item) => ( +
+ + {item.title}. + +
{formatDateIndonesianWithTime(item.createdAt)}
+
+ ))} + + ) : ( +

Loading...

// Tampilkan pesan "Loading..." saat data belum tersedia. + )} +
+
+ + +
+
+ ); +}; + +export default NewsBottom; diff --git a/components/landing-page/NewsTicker.tsx b/components/landing-page/NewsTicker.tsx deleted file mode 100644 index 5d78c30f..00000000 --- a/components/landing-page/NewsTicker.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const NewsTicker = () => { - return ( -
- ) -} - -export default NewsTicker \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e0828d86..6aa3384d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@fullcalendar/react": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15", "@hookform/resolvers": "^3.9.0", - "@iconify/react": "^5.0.1", + "@iconify/react": "^5.0.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-aspect-ratio": "^1.0.3", diff --git a/package.json b/package.json index e1a9d998..1ad7b398 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@fullcalendar/react": "^6.1.15", "@fullcalendar/timegrid": "^6.1.15", "@hookform/resolvers": "^3.9.0", - "@iconify/react": "^5.0.1", + "@iconify/react": "^5.0.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-aspect-ratio": "^1.0.3", diff --git a/public/assets/audio-black.svg b/public/assets/audio-black.svg new file mode 100644 index 00000000..e06c3a4e --- /dev/null +++ b/public/assets/audio-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/document.svg b/public/assets/document.svg new file mode 100644 index 00000000..beffc5a3 --- /dev/null +++ b/public/assets/document.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/wave.svg b/public/assets/wave.svg new file mode 100644 index 00000000..12957cdc --- /dev/null +++ b/public/assets/wave.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tsconfig.json b/tsconfig.json index b9effb6d..56fa23fa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/landing-page/NewsTicker.tsx", "components/landing-page/NavBottom.js"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/landing-page/NewsBottom.tsx", "components/landing-page/NavBottom.js"], "exclude": ["node_modules"] }