From 6b93b8b79ff36a5f8df63a3090fec0f653d1e3cd Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Tue, 14 Jan 2025 22:30:13 +0700 Subject: [PATCH] fixing landing --- components/icons.tsx | 10 +- components/landing/BannerHumas.tsx | 6 +- components/landing/BodyLayout.tsx | 4 +- components/landing/ENewsPolri.tsx | 35 +++-- components/landing/Footer.tsx | 127 +++++++++++++++- components/landing/HeaderNews.tsx | 166 +++++++++++++-------- components/landing/MediaSocial.tsx | 67 +++------ components/landing/NewsTicker.tsx | 26 +++- components/landing/RegionalNews.tsx | 2 +- components/landing/SidebarNav.tsx | 99 +++++------- components/layout/humas-layout.tsx | 3 +- components/layout/navbar/NavbarHumas.tsx | 148 ++++++++++-------- components/ui/social-media/facebook.tsx | 2 +- components/ui/social-media/gpr-kominfo.tsx | 45 +++--- components/ui/social-media/instagram.tsx | 41 +++-- components/ui/social-media/twitter.tsx | 41 +++-- components/ui/social-media/youtube.tsx | 3 +- styles/globals.css | 24 +++ 18 files changed, 512 insertions(+), 337 deletions(-) diff --git a/components/icons.tsx b/components/icons.tsx index 02c9077..39f13a6 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -662,19 +662,19 @@ export const EyeIcon = ({ height = 24, width = 14, fill = "currentColor", - color = "black", ...props }: IconSvgProps) => ( ); diff --git a/components/landing/BannerHumas.tsx b/components/landing/BannerHumas.tsx index 80c4073..9d0e12a 100644 --- a/components/landing/BannerHumas.tsx +++ b/components/landing/BannerHumas.tsx @@ -4,13 +4,13 @@ import React from "react"; export default function BannerHumas() { const t = useTranslations("Banner"); return ( -
+
humasbanner -
+

{t("jumbotron")}

diff --git a/components/landing/BodyLayout.tsx b/components/landing/BodyLayout.tsx index 1ccad31..5229794 100644 --- a/components/landing/BodyLayout.tsx +++ b/components/landing/BodyLayout.tsx @@ -9,8 +9,8 @@ import SidebarNav from "./SidebarNav"; export default function BodyLayout() { return ( <> -
-
+
+
{/* */} {/* */} diff --git a/components/landing/ENewsPolri.tsx b/components/landing/ENewsPolri.tsx index ae3fb96..5354583 100644 --- a/components/landing/ENewsPolri.tsx +++ b/components/landing/ENewsPolri.tsx @@ -5,9 +5,13 @@ import { useEffect, useState } from "react"; import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons"; import Link from "next/link"; import { getListArticle } from "@/service/article"; -import { convertDateFormat } from "@/utils/global"; +import { convertDateFormat, textEllipsis } from "@/utils/global"; import { Autoplay, Pagination, Navigation } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/pagination"; +import "swiper/css/effect-fade"; +import "swiper/css/navigation"; export default function ENewsPolri() { const [article, setArticle] = useState([]); @@ -24,25 +28,23 @@ export default function ENewsPolri() { }, []); return ( -
+

E-Majalah Polri

-
+
( - headernews - -
+ +
-

- {newsItem.title} +

+ {textEllipsis(newsItem.title, 40)}

{convertDateFormat(newsItem.createdAt)} WIB

- + {newsItem.viewCount === null ? 0 : newsItem.viewCount}

diff --git a/components/landing/Footer.tsx b/components/landing/Footer.tsx index bc36178..2ccab61 100644 --- a/components/landing/Footer.tsx +++ b/components/landing/Footer.tsx @@ -9,14 +9,14 @@ export default function Footer() { const t3 = useTranslations("LandingInformasiPublik"); return (
-
+
-
+
Berita Terkini @@ -137,6 +137,129 @@ export default function Footer() {
+
+
+ Berita Terkini + + Info Komnas Anak + + + Info Komnas Perempuan + + Kontak +
+
+ {t2("tentang")} PPID + {t2("profilPimpinan")} + {t2("strukturOrganisasi")} + + {t2("visi")} & {t2("misi")} + + Logo +
+
+ + SP2HP + + + Formulir Permohonan Informasi + + + Pelayanan SIM + + + Pelayanan E-Rikkes SIM + + + Pelayana Test Psikologi SIM + + + Pelayanan E-Avis + + + Pelayanan STNK & BPKP + + + Pelayanan SKCK + + {/* Pelayanan Karantina Presisi */} + + Pelayanan Propam Presisi + + + Pelayanan Dumas Presisi + + + Pelayanan Polisiku + + + Pelayanan BINMAS + +
+
+
+ + {t3("InformasiBerkala")} + + + {t3("InformasiSertaMerta")} + + + {t3("InformasiSetiapSaat")} + + + {t3("InformasiDikecualikan")} + + + {t3("UUdanPeraturan")} + + {/* Penerangan Satuan */} +
+
+

Subscribe

+

Dapatkan info & event terupdate dari kami.

+
+ + // } + /> +
+ +
+
+ + + +
+
+
© Copyright Humas

  POLRI ®

  All Rights Reserved diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx index 5dd7946..13078bc 100644 --- a/components/landing/HeaderNews.tsx +++ b/components/landing/HeaderNews.tsx @@ -5,12 +5,14 @@ import { EyeIcon } from "../icons"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/pagination"; +import "swiper/css/effect-fade"; +import "swiper/css/navigation"; import { Autoplay, Pagination, Navigation } from "swiper/modules"; import Link from "next/link"; import GPRKominfo from "../ui/social-media/gpr-kominfo"; import { useEffect, useState } from "react"; import { getListArticle } from "@/service/article"; -import { convertDateFormat } from "@/utils/global"; +import { convertDateFormat, textEllipsis } from "@/utils/global"; import { useTranslations } from "next-intl"; export default function HeaderNews() { @@ -27,25 +29,72 @@ export default function HeaderNews() { }, []); return ( -
-
-
+
+
+
+ + {article?.map((newsItem: any) => ( + + + headernews + +
+ +

+ {textEllipsis(newsItem.title, 40)} +

+ +

+ {convertDateFormat(newsItem.createdAt)} WIB +

+

+ + {newsItem.viewCount === null ? 0 : newsItem.viewCount} +

+
+ + + + ))} + +
+

{t("berita")}

- + {article?.map((data: any) => (
-

{data.title}

-

- {" "} - {convertDateFormat(data.createdAt)} WIB -

-

- - {data.viewCount === null ? 0 : data.viewCount} -

+ headernews +
+

{textEllipsis(data.title, 40)}

+

{data.title}

+

+ {convertDateFormat(data.createdAt)} WIB +

+

+ + {data.viewCount === null ? 0 : data.viewCount} +

+
))} @@ -60,55 +109,48 @@ export default function HeaderNews() {
-
-
- - {article?.map((newsItem: any) => ( - - - headernews - -
- -

- {newsItem.title} -

- -

- {convertDateFormat(newsItem.createdAt)} WIB + +

+ + {article?.map((newsItem: any) => ( + + + headernews + +
+ +

+ {newsItem.title}

-

- - {newsItem.viewCount === null ? 0 : newsItem.viewCount} -

-
- - - - ))} - -
+ +

+ {convertDateFormat(newsItem.createdAt)} WIB +

+

+ + {newsItem.viewCount === null ? 0 : newsItem.viewCount} +

+
+ + + + ))} +
-
+
diff --git a/components/landing/MediaSocial.tsx b/components/landing/MediaSocial.tsx index 4214f46..279f803 100644 --- a/components/landing/MediaSocial.tsx +++ b/components/landing/MediaSocial.tsx @@ -62,8 +62,14 @@ export default function MediaSocial() {

Twitter

-
- Lihat Semua +
+ + Lihat Semua + {" "}
@@ -79,6 +85,7 @@ export default function MediaSocial() {
Lihat Semua @@ -96,7 +103,13 @@ export default function MediaSocial() {

Facebook

- Lihat Semua + + Lihat Semua +
@@ -108,48 +121,16 @@ export default function MediaSocial() {

Tiktok

- Lihat Semua + + Lihat Semua + {" "}
-
- {dummyData.map((data: any) => ( -
-
-
-
- logo -
-
-

- {data.division} -

-
-
-
-
- - Share -
-
-
-
- {data.description} - -
- Lihat Selengkapnya - -
-
-
- header -
-
-
- ))} -
+
diff --git a/components/landing/NewsTicker.tsx b/components/landing/NewsTicker.tsx index abff716..e0c9d3b 100644 --- a/components/landing/NewsTicker.tsx +++ b/components/landing/NewsTicker.tsx @@ -2,7 +2,8 @@ import { useEffect, useState } from "react"; import { ChevronLeftIcon, ChevronRightIcon } from "../icons"; import { getListArticle } from "@/service/article"; -import { convertDateFormat } from "@/utils/global"; +import { convertDateFormat, textEllipsis } from "@/utils/global"; +import Link from "next/link"; export default function NewsTicker() { const [article, setArticle] = useState([]); @@ -46,16 +47,31 @@ export default function NewsTicker() { return (
-
- BREAKING NEWS +
+ BREAKING NEWS
-

{article[currentNewsIndex]?.title}

+ +

+ {article[currentNewsIndex]?.title} +

+ + +

+ {textEllipsis(article[currentNewsIndex]?.title, 28)} +

+

{convertDateFormat(article[currentNewsIndex]?.createdAt)}

diff --git a/components/landing/RegionalNews.tsx b/components/landing/RegionalNews.tsx index 7f72286..c9196ba 100644 --- a/components/landing/RegionalNews.tsx +++ b/components/landing/RegionalNews.tsx @@ -294,7 +294,7 @@ export default function RegionalNews() { // }, [list]); return ( -
+

{" "} diff --git a/components/landing/SidebarNav.tsx b/components/landing/SidebarNav.tsx index 92c64ad..c48c579 100644 --- a/components/landing/SidebarNav.tsx +++ b/components/landing/SidebarNav.tsx @@ -1,18 +1,31 @@ "use client"; import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { EyeIcon } from "../icons"; import Image from "next/image"; import Link from "next/link"; +import { getListArticle } from "@/service/article"; +import { convertDateFormat } from "@/utils/global"; export default function SidebarNav() { - const [article, setArticle] = useState([]); const [selectedTab, setSelectedTab] = useState("media"); + const [article, setArticle] = useState([]); + + useEffect(() => { + async function getArticle() { + const req = { page: 1, search: "", limit: "10" }; + + const response = await getListArticle(req); + setArticle(response?.data?.data); + } + getArticle(); + }, []); + return ( <> -

-
+
+
setSelectedTab("media")} className={ @@ -37,61 +50,23 @@ export default function SidebarNav() { {selectedTab === "media" ? (
-
-

- Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan - Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari -

-

21-07-2023 13:50

-

- - 82 -

-
-
-

- Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan - Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari -

-

21-07-2023 13:50

-

- - 82 -

-
-
-

- Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan - Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari -

-

21-07-2023 13:50

-

- - 82 -

-
-
-

- Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan - Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari -

-

21-07-2023 13:50

-

- - 82 -

-
-
-

- Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan - Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari -

-

21-07-2023 13:50

-

- - 82 -

-
+ {article?.map((list: any) => ( +
+ +

{list?.title}

+ +

+ {convertDateFormat(list?.createdAt)} WIB +

+

+ + {list?.viewCount === null ? 0 : list?.viewCount} +

+
+ ))}
)} -

+

Pelayanan Informasi Publik

@@ -251,11 +226,11 @@ export default function SidebarNav() {
*/}
-

+

{" "} Info Eksternal

-
+

diff --git a/components/layout/humas-layout.tsx b/components/layout/humas-layout.tsx index e86ebdf..bf79e01 100644 --- a/components/layout/humas-layout.tsx +++ b/components/layout/humas-layout.tsx @@ -10,7 +10,8 @@ interface Props { export const HumasLayout = ({ children }: Props) => { return (

- + + {children} diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx index 9d8faf6..7bb1ff5 100644 --- a/components/layout/navbar/NavbarHumas.tsx +++ b/components/layout/navbar/NavbarHumas.tsx @@ -55,13 +55,15 @@ interface DropdownOpenState { [key: string]: boolean; } -export default function NavbarHumas() { +export default function NavbarHumas(props: { size: string }) { + const { size } = props; const [dropdownOpen, setDropdownOpen] = useState({}); const [isOpen, setIsOpen] = useState(false); const router = useRouter(); const t = useTranslations("Navbar"); const token = Cookies.get("access_token"); const isAuthenticated = Cookies.get("is_authenticated"); + const [isScrolled, setIsScrolled] = useState(false); const language = storedLanguage((state) => state.locale); const setLanguage = storedLanguage((state) => state.setLocale); @@ -101,12 +103,29 @@ export default function NavbarHumas() { type="search" /> ); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 0); + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + return (
@@ -1070,70 +1089,77 @@ export default function NavbarHumas() {
- - - - - {/* {searchInput} */} -
- {siteConfig.humasMenuItems.map((item) => ( -
- - {item.key === "login" ? ( - token ? ( - - ) : ( - - - - ) - ) : item.key === "dashboard" ? ( - token && ( - - {item.label} - - ) - ) : ( -
toggleDropdown(item.key)} - className="flex items-end gap-2" - > - {item.href ? ( - - {item.label} - - ) : ( - {item.label} - )} - {item.submenu && - (dropdownOpen[item.key] ? ( - + +
+ + logo + +
+ + + + {/* {searchInput} */} +
+ {siteConfig.humasMenuItems.map((item) => ( +
+ + {item.key === "login" ? ( + token ? ( + ) : ( - + + + + ) + ) : item.key === "dashboard" ? ( + token && ( + + {item.label} + + ) + ) : ( +
toggleDropdown(item.key)} + className="flex items-end gap-2" + > + {item.href ? ( + + {item.label} + + ) : ( + {item.label} + )} + {item.submenu && + (dropdownOpen[item.key] ? ( + + ) : ( + + ))} +
+ )} + + {dropdownOpen[item.key] && item.submenu && ( +
+ {item.submenu.map((subItem, subIndex) => ( +
+ {subItem.label} +
))} -
- )} - - {dropdownOpen[item.key] && item.submenu && ( -
- {item.submenu.map((subItem, subIndex) => ( -
- {subItem.label}
- ))} + )}
- )} + ))}
- ))} +
- +
diff --git a/components/ui/social-media/facebook.tsx b/components/ui/social-media/facebook.tsx index d4cb3b3..a976e6c 100644 --- a/components/ui/social-media/facebook.tsx +++ b/components/ui/social-media/facebook.tsx @@ -17,7 +17,7 @@ const FacebookWidget = () => { return (
); }; diff --git a/components/ui/social-media/gpr-kominfo.tsx b/components/ui/social-media/gpr-kominfo.tsx index 0843e1e..79523ce 100644 --- a/components/ui/social-media/gpr-kominfo.tsx +++ b/components/ui/social-media/gpr-kominfo.tsx @@ -1,33 +1,26 @@ -import { useEffect } from 'react'; - +import { useEffect } from "react"; const GPRKominfo = () => { + useEffect(() => { + if (typeof window !== "undefined") { + const script = document.createElement("script"); + script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js"; + script.async = true; + document.head.appendChild(script); - useEffect(() => { + return () => { + document.head.removeChild(script); + }; + } + }, []); - if (typeof window !== 'undefined') { - const script = document.createElement('script'); - script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js"; - script.async = true; - document.head.appendChild(script); - - return () => { - document.head.removeChild(script); - }; - } - }, []); - - - - return ( - <> -
-
- - - ); + return ( + <> +
+
+ + + ); }; export default GPRKominfo; - - diff --git a/components/ui/social-media/instagram.tsx b/components/ui/social-media/instagram.tsx index f258ffd..bb14ded 100644 --- a/components/ui/social-media/instagram.tsx +++ b/components/ui/social-media/instagram.tsx @@ -1,29 +1,26 @@ -import { useEffect } from 'react'; - +import { useEffect } from "react"; const InstagramWidget = () => { + useEffect(() => { + if (typeof window !== "undefined") { + const script = document.createElement("script"); + script.src = "https://embedsocial.com/cdn/ht.js"; + script.async = true; + document.head.appendChild(script); - useEffect(() => { + return () => { + document.head.removeChild(script); + }; + } + }, []); - if (typeof window !== 'undefined') { - const script = document.createElement('script'); - script.src = "https://embedsocial.com/cdn/ht.js"; - script.async = true; - document.head.appendChild(script); - - return () => { - document.head.removeChild(script); - }; - } - }, []); - - - - return ( -
- ); + return ( + //
+
+ ); }; export default InstagramWidget; - - diff --git a/components/ui/social-media/twitter.tsx b/components/ui/social-media/twitter.tsx index ecdcbd7..501be7e 100644 --- a/components/ui/social-media/twitter.tsx +++ b/components/ui/social-media/twitter.tsx @@ -1,29 +1,26 @@ -import { useEffect } from 'react'; - +import { useEffect } from "react"; const TwitterWidget = () => { + useEffect(() => { + if (typeof window !== "undefined") { + const script = document.createElement("script"); + script.src = "https://embedsocial.com/cdn/ht.js"; + script.async = true; + document.head.appendChild(script); - useEffect(() => { + return () => { + document.head.removeChild(script); + }; + } + }, []); - if (typeof window !== 'undefined') { - const script = document.createElement('script'); - script.src = "https://embedsocial.com/cdn/ht.js"; - script.async = true; - document.head.appendChild(script); - - return () => { - document.head.removeChild(script); - }; - } - }, []); - - - - return ( -
- ); + return ( + //
+
+ ); }; export default TwitterWidget; - - diff --git a/components/ui/social-media/youtube.tsx b/components/ui/social-media/youtube.tsx index 1df0f81..0f1ef19 100644 --- a/components/ui/social-media/youtube.tsx +++ b/components/ui/social-media/youtube.tsx @@ -17,7 +17,8 @@ const YoutubeWidget = () => { return (
); }; diff --git a/styles/globals.css b/styles/globals.css index 32458ef..3c71dcf 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -32,6 +32,30 @@ --scroll-shadow-size: 40px; } +.swiper { + width: 100%; + height: 100%; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + background: #fff; + border-radius: 1rem; + + /* Center slide text vertically */ + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + @layer utilities { .clip-path-triangle { clip-path: polygon(0 0, 100% 50%, 0 100%);