From a473fb4e0d7f4c030a423e96e52e5b52e76f9289 Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Thu, 5 Dec 2024 21:56:27 +0700 Subject: [PATCH] style: Commit,adjust spacing and layouting --- .../(public)/indeks/detail/[slug]/page.tsx | 245 ++--- app/[locale]/(public)/schedule/page.tsx | 683 ++++++------ app/[locale]/(public)/schedule2/page.tsx | 10 - .../(public)/video/detail/[slug]/page.tsx | 250 +++++ app/[locale]/page.tsx | 2 +- components/landing-page/Hero.tsx | 74 +- components/landing-page/Navbar.tsx | 67 +- components/landing-page/NewsBottom.tsx | 117 -- components/landing-page/new-content.tsx | 28 +- components/landing-page/popular-content.tsx | 39 +- .../{SearchSection.tsx => search-section.tsx} | 0 components/ui/carousel.tsx | 4 +- components/ui/dropdown-menu.tsx | 134 +-- package-lock.json | 996 ++++++++++++++---- package.json | 2 +- 15 files changed, 1642 insertions(+), 1009 deletions(-) delete mode 100644 app/[locale]/(public)/schedule2/page.tsx create mode 100644 app/[locale]/(public)/video/detail/[slug]/page.tsx delete mode 100644 components/landing-page/NewsBottom.tsx rename components/landing-page/{SearchSection.tsx => search-section.tsx} (100%) diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx index 893df413..8f1faeee 100644 --- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx @@ -1,27 +1,56 @@ "use client"; import { Card, CardContent } from "@/components/ui/card"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; -import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; import React, { useState } from "react"; +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" }, + { + id: 1, + title: "Giat Polri", + thumbnail: "/assets/banner-sample.png", + htmlDescription: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.", + }, + { + id: 2, + title: "Giat Polri", + thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018", + htmlDescription: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.", + }, + { + id: 3, + title: "Giat Polri", + thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018", + htmlDescription: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.", + }, + { + id: 4, + thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018", + htmlDescription: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.", + }, + { + id: 5, + title: "Giat Polri", + thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018", + htmlDescription: + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.", + }, ]; const dummyData = { id: 12312, - title: "ahahah", + title: "TITLE", createdBy: "Mabes", createdAt: "21-21-2021", time: "18:23", - desc: "sdaasd", + desc: "halooo", 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.

', }; @@ -32,106 +61,26 @@ const IndeksDetail = () => { const router = useRouter(); const pathname = usePathname(); - const sizes = [ - { label: "XL", value: "3198 x 1798 px" }, - { label: "L", value: "2399 x 1349 px" }, - { label: "M", value: "1599 x 899 px" }, - { label: "S", value: "1066 x 599 px" }, - { label: "XS", value: "800 x 450 px" }, - ]; - return ( -
- {/* Container Utama */} -
- {/* Bagian Kiri */} -
- {/* Gambar Utama */} -
- Main -
-
- - {/* Thumbnail */} -
- {[1, 2, 3, 4].map((_, index) => ( - {`Thumbnail - ))} -
-
- - {/* Bagian Kanan */} -
-
- - - -

Simpan

-
- {/* garis */} -
- - - OPS MANTAP PRAJA & PILKADA 2024 - - -
-

poldajabar

-

pilkadamai2024

-
- -
- - {/* Opsi Ukuran Foto */} -

Opsi Ukuran Foto

- -
- -
- {sizes.map((size) => ( - - ))} -
- - {/* Download Semua */} -
- -
- - {/* Tombol Download */} - -
+
+ {/* Judul */} +
+

INDEKS / DETAIL

+

{dummyData.title}

+
+ {/* Gambar Utama */} +
+ Main
- {/* Footer Informasi */}

oleh {dummyData.createdBy} | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65

-

Kreator: poppy-PID-poldajabar

{/* Keterangan */}
-

{dummyData.title}

@@ -146,92 +95,26 @@ const IndeksDetail = () => {
-

- Konten Serupa -

- - - - Audio Visual - - - Audio - - - Foto - - - Teks - - - +

Post Terkait

- {selectedTab == "video" ? ( - - - {dummyImage.map((image) => ( - - - - - - - - ))} - - - - - ) : selectedTab == "audio" ? ( - - - {dummyImage.map((image) => ( - - - - - - - - ))} - - - - - ) : selectedTab == "image" ? ( - - - {dummyImage.map((image) => ( - - router.push(`${pathname}/image/detail/${image.id}`)}> - - - - - - ))} - - - - - ) : ( - - - {dummyImage.map((image) => ( - - - - - - - - ))} - - - - - )} + + + {dummyImage.map((image) => ( + + + + +

{image.title}

+

{textEllipsis(image.htmlDescription, 100)}

+ + + + ))} + + + +
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx index ca1b2e50..93311fa7 100644 --- a/app/[locale]/(public)/schedule/page.tsx +++ b/app/[locale]/(public)/schedule/page.tsx @@ -5,9 +5,9 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { CalendarIcon } from "lucide-react"; import React, { useEffect, useState } from "react"; -import { format } from "date-fns" -import { cn } from "@/lib/utils" - +import { format } from "date-fns"; +import { cn } from "@/lib/utils"; +import { Checkbox } from "@/components/ui/checkbox"; const Jadwal = () => { const city = [ @@ -62,7 +62,7 @@ const Jadwal = () => { const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; - const [startDate, setStartDate] = useState(new Date()); + const [startDate, setStartDate] = useState(new Date()); const [dateAWeek, setDateAWeek] = useState([]); const curr = new Date(); const startDays = (curr.getDay() + 7 - 1) % 7; @@ -84,11 +84,11 @@ const Jadwal = () => { initState(); }, []); - const handleChangeDate = (date: Date|undefined) => { + const handleChangeDate = (date: Date | undefined) => { setStartDate(date); const dateListTemp = []; const curr = date; - if(curr){ + if (curr) { const startDays = (curr.getDay() + 7 - 1) % 7; curr.setDate(curr.getDate() - startDays); @@ -97,25 +97,22 @@ const Jadwal = () => { dateListTemp.push(new Date(curr).toISOString().slice(0, 10)); curr.setDate(curr.getDate() + 1); } - + console.log("Change Date :", dateListTemp); setDateList(dateListTemp); setDateAWeek(dateListTemp); } - }; - function getLastWeek(today: Date|undefined) { - if(today){ + function getLastWeek(today: Date | undefined) { + if (today) { return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); - } } - function getNextWeek(today: Date|undefined) { - if(today){ + function getNextWeek(today: Date | undefined) { + if (today) { return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7); - } } @@ -125,28 +122,27 @@ const Jadwal = () => { console.log("Next week :", dayInNextWeek); const dateListTemp = []; const curr = dayInNextWeek; - if(curr){ + if (curr) { const startDays = (curr.getDay() + 7 - 1) % 7; curr.setDate(curr.getDate() - startDays); curr.setDate(curr.getDate() - curr.getDay() + 1); for (let i = 0; i < 7; i++) { const newDate = new Date(curr); - + if (i == 0) { setStartDate(newDate); } - + const dateFormatter = Intl.DateTimeFormat("sv-SE"); dateListTemp.push(dateFormatter.format(newDate)); curr.setDate(curr.getDate() + 1); } - + console.log(dateListTemp); setDateList(dateListTemp); setDateAWeek(dateListTemp); } - }; const changePrevWeek = () => { @@ -156,52 +152,68 @@ const Jadwal = () => { console.log(startDate); const dateListTemp = []; const curr = dayInPrevWeek; - if(curr){ + if (curr) { const startDays = (curr.getDay() + 7 - 1) % 7; curr.setDate(curr.getDate() - startDays); curr.setDate(curr.getDate() - curr.getDay() + 1); for (let i = 0; i < 7; i++) { const newDate = new Date(curr); - + if (i == 0) { setStartDate(newDate); } - + const dateFormatter = Intl.DateTimeFormat("sv-SE"); dateListTemp.push(dateFormatter.format(newDate)); curr.setDate(curr.getDate() + 1); } - + console.log(dateListTemp); setDateList(dateListTemp); setDateAWeek(dateListTemp); } - }; + const categories = [ + { id: 1, title: "POLDA METRO JAYA" }, + { id: 2, title: "POLDA JAWA BARAT" }, + { id: 3, title: "POLDA BANTEN" }, + { id: 4, title: "POLDA JAWA TENGAH" }, + { id: 5, title: "POLDA D.I YOGYAKARTA" }, + { id: 6, title: "POLDA JAWA TIMUR" }, + { id: 7, title: "POLDA ACEH" }, + { id: 8, title: "POLDA SUMATERA UTARA" }, + { id: 9, title: "POLDA SUMATERA BARAT" }, + ]; return ( <> {/* Awal Komponen Kiri */} -
+
- - { - handleChangeDate(e)}} initialFocus /> + { + handleChangeDate(e); + }} + initialFocus + />
- + @@ -211,316 +223,385 @@ const Jadwal = () => { - - -
- {" "} - Filter + + +
+
Filter
+ +
+
+
+

Region Filter

+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
+
+ +

POLDA METRO JAYA

+
-
-
Region Filter
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - +
+
+
+
+
Time Table - changePrevWeek()}>prev {dateAWeek[0]?.split("-")[2]}Monday - {dateAWeek[1]?.split("-")[2]}Tuesday{dateAWeek[2]?.split("-")[2]}Wednesday{dateAWeek[3]?.split("-")[2]}Thursday{dateAWeek[4]?.split("-")[2]}Friday{dateAWeek[5]?.split("-")[2]}Saturday - {dateAWeek[6]?.split("-")[2]}Sunday changeNextWeek()}>next -
06:00
+ + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - -
Time Table + changePrevWeek()}> + + + + {" "} +
+

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

+

Monday

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

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

+

Sunday

+
+ changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center"> + + + + +
06:00
07:00
07:00
08:00
08:00
09:00
09:00
10:00
10:00
11:00
11:00
12:00
12:00
13:00
13:00
14:00
14:00
15:00
15:00
16:00
16:00
17:00
17:00
18:00
18:00
19:00
19:00
20:00
20:00
21:00
21:00
22:00
22:00
23:00
23:00
24:00
24:00
01:00
01:00
02:00
02:00
03:00
03:00
04:00
04:00
05:00
+ + 05:00 + + + + + + + + + + +
+
{/* Akhir Komponen Kiri */} {/* Awal Komponent Kanan */}
-
+
+

HALO

+
- {/* Akhir Komponen Kiri */} + {/* Akhir Komponen Kanan */} ); }; diff --git a/app/[locale]/(public)/schedule2/page.tsx b/app/[locale]/(public)/schedule2/page.tsx deleted file mode 100644 index 9b21f3d6..00000000 --- a/app/[locale]/(public)/schedule2/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ - - -const Schedule2 = () => { - - - - return
Schedule2
; -}; - -export default Schedule2; diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx new file mode 100644 index 00000000..6893667e --- /dev/null +++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx @@ -0,0 +1,250 @@ +"use client"; +import { Card, CardContent } from "@/components/ui/card"; +import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +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"; + + +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: "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 DetailVideo = () => { + const [selectedSize, setSelectedSize] = useState("L"); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const locale = params?.locale; + + const sizes = [ + { label: "XL", value: "3198 x 1798 px" }, + { label: "L", value: "2399 x 1349 px" }, + { label: "M", value: "1599 x 899 px" }, + { label: "S", value: "1066 x 599 px" }, + { label: "XS", value: "800 x 450 px" }, + ]; + + return ( +
+ {/* Container Utama */} +
+ {/* Bagian Kiri */} +
+ {/* Gambar Utama */} +
+ Main +
+
+ + {/* Thumbnail */} +
+ {[1, 2, 3, 4].map((_, index) => ( + {`Thumbnail + ))} +
+
+ + {/* Bagian Kanan */} +
+
+ + + +

Simpan

+
+ {/* garis */} +
+ + + OPS MANTAP PRAJA & PILKADA 2024 + + +
+

poldajabar

+

pilkadamai2024

+
+ +
+ + {/* Opsi Ukuran Foto */} +

Opsi Ukuran Foto

+ +
+ +
+ {sizes.map((size) => ( + + ))} +
+ + {/* Download Semua */} +
+ +
+ + {/* Tombol Download */} + +
+
+ + {/* Footer Informasi */} +
+

+ oleh {dummyData.createdBy} | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65 +

+

Kreator: poppy-PID-poldajabar

+
+ + {/* Keterangan */} +
+

{dummyData.title}

+
+
+ + {/* Comment */} +
+

Berikan Komentar

+