- Top 5 News Update
+
+
- {convertDateFormatNoTime(newsItem?.createdAt)}
+ {formatDate(newsItem?.createdAt)}
- {newsItem?.title}
+
+ {textEllipsis(newsItem?.title, 50)}
+
@@ -179,7 +215,10 @@ export default function MedolUpdate() {
breakpoints={{
// When the window width is less than 640px
720: {
- slidesPerView: 2, // Set slidesPerView to 1 on mobile
+ slidesPerView: 3, // Set slidesPerView to 1 on mobile
+ },
+ 1080: {
+ slidesPerView: 4,
},
}}
pagination={true}
@@ -214,13 +253,16 @@ export default function MedolUpdate() {
radius="lg"
width="300%"
alt="tes"
- className="object-cover !h-[30vh]"
+ className="object-cover !h-[20vh]"
src={newsItem?.image}
/>
- {convertDateFormatNoTime(newsItem?.date)}
- {newsItem?.title}
+ {/* {convertDateFormatNoTime(newsItem?.date)} */}
+ {formatDate(newsItem?.date)}
+
+ {textEllipsis(newsItem?.title, 50)}
+
@@ -249,7 +291,10 @@ export default function MedolUpdate() {
breakpoints={{
// When the window width is less than 640px
720: {
- slidesPerView: 2, // Set slidesPerView to 1 on mobile
+ slidesPerView: 3, // Set slidesPerView to 1 on mobile
+ },
+ 1080: {
+ slidesPerView: 4,
},
}}
pagination={true}
@@ -287,13 +332,16 @@ export default function MedolUpdate() {
radius="lg"
width="300%"
alt="tes"
- className="object-cover !h-[30vh]"
+ className="object-cover !h-[20vh]"
src={newsItem?.thumbnail}
/>
- {newsItem?.created_at}
- {newsItem?.judul}
+ {/* {newsItem?.created_at} */}
+ {newsItem?.created_at}
+
+ {textEllipsis(newsItem?.judul, 50)}
+
diff --git a/components/landing/NewsTicker.tsx b/components/landing/NewsTicker.tsx
index f1d52cd..1a3ba5a 100644
--- a/components/landing/NewsTicker.tsx
+++ b/components/landing/NewsTicker.tsx
@@ -51,31 +51,33 @@ export default function NewsTicker() {
BREAKING NEWS
-
-
-
- {article[currentNewsIndex]?.title}
+
+ {article[currentNewsIndex]?.title}
+
+
+
+
+ {textEllipsis(article[currentNewsIndex]?.title, 28)}
+
+
+
+ {convertDateFormat(article[currentNewsIndex]?.createdAt)}
-
-
-
- {textEllipsis(article[currentNewsIndex]?.title, 28)}
-
-
-
- {convertDateFormat(article[currentNewsIndex]?.createdAt)}
-
-
+
+ )}
+ );
+}
diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
new file mode 100644
index 0000000..d01392d
--- /dev/null
+++ b/components/landing/banner-new.tsx
@@ -0,0 +1,233 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import {
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronUpIcon,
+ FbIconNav,
+ IdnIcon,
+ IgIcon,
+ SearchIcon,
+ SearchIcons,
+ TtIcon,
+ TwIcon,
+ UKIcon,
+ YtIcon,
+} from "../icons";
+import Link from "next/link";
+import {
+ Dropdown,
+ DropdownTrigger,
+ DropdownMenu,
+ DropdownItem,
+ Button,
+ Input,
+} from "@heroui/react";
+import storedLanguage from "@/store/language-store";
+import { ThemeSwitch } from "../theme-switch";
+
+const images = [
+ "/landing-1.jpg",
+ "/landing-2.jpg",
+ "/landing-3.jpg",
+ "/landing-4.jpg",
+];
+
+export default function BannerHumasNew() {
+ const t = useTranslations("Banner");
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [resetTimer, setResetTimer] = useState(0);
+ const [onOpen, setOnOpen] = useState(false);
+ const [searchValue, setSearchValue] = useState("");
+ const language = storedLanguage((state) => state.locale);
+ const setLanguage = storedLanguage((state) => state.setLocale);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+ }, 25000);
+
+ return () => clearInterval(interval);
+ }, [resetTimer]);
+ const nextImage = () => {
+ setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+ setResetTimer((prev) => prev + 1);
+ };
+
+ const prevImage = () => {
+ setCurrentIndex(
+ (prevIndex) => (prevIndex - 1 + images.length) % images.length
+ );
+ setResetTimer((prev) => prev + 1);
+ };
+
+ return (
+
+
+ {images.map((img, index) => (
+
+
+
+
+
+
+
+ SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
+
+
OBYEKTIF - DIPERCAYA - PARTISIPASI
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Pelayanan Masyarakat
+ Informasi Publik
+ Tentang
+ Aplikasi Polri
+
+
+
+
+ e-PPID Polri
+ {" "}
+
+
+
+
+
+ }
+ />
+
+
+
+ {/*
+ {t("jumbotron")}
+
*/}
+ {/*
{`"${t("phrase")}"`}
*/}
+
+
+
+
+
+
+
+ //
+ //
+ //
+ //
Your Text Here
+ //
+ );
+}
diff --git a/components/landing/footer-new.tsx b/components/landing/footer-new.tsx
index 7aee1c3..e034ce6 100644
--- a/components/landing/footer-new.tsx
+++ b/components/landing/footer-new.tsx
@@ -20,7 +20,7 @@ export default function FooterNew() {
return (
-
+
Channel Humas Polri
@@ -159,7 +159,7 @@ export default function FooterNew() {
Kontributor Wilayah
- {" "}
+
diff --git a/components/landing/social-media.tsx b/components/landing/social-media.tsx
new file mode 100644
index 0000000..7d425ab
--- /dev/null
+++ b/components/landing/social-media.tsx
@@ -0,0 +1,75 @@
+"use client";
+import {
+ Button,
+ Card,
+ CardBody,
+ CardFooter,
+ Image,
+ Tab,
+ Tabs,
+} from "@heroui/react";
+import React, { useEffect, useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Navigation, Pagination } from "swiper/modules";
+import { topNewsMediahub } from "@/service/medol-news-update";
+import Link from "next/link";
+import {
+ getImageInp,
+ inpLogin,
+ topNewsInp,
+ topNewsTbn,
+} from "@/service/third-party-service";
+import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
+import PolriTvWidget from "../ui/social-media/polri-tv";
+import { useTranslations } from "next-intl";
+import TwitterWidget from "../ui/social-media/twitter";
+import InstagramWidget from "../ui/social-media/instagram";
+import YoutubeWidget from "../ui/social-media/youtube";
+
+export default function SocialMediaNew() {
+ const [selectedTab, setSelectedTab] = useState
("x");
+ const [mediahubUpdate, setMediahubUpdate] = useState([]);
+ const [tbnUpdate, setTbnUpdate] = useState([]);
+ const [inpUpdate, setInpUpdate] = useState([]);
+
+ const t = useTranslations("Landing");
+ return (
+
+
+
+ Media Sosial Humas
+
+
+
+
+
+
+
+
+
+
+
+
+
- = ({
- className,
- classNames,
+ className,
+ classNames,
}) => {
- const { theme, setTheme } = useTheme();
- const isSSR = useIsSSR();
+ const { theme, setTheme } = useTheme();
+ const isSSR = useIsSSR();
- const onChange = () => {
- theme === "light" ? setTheme("dark") : setTheme("light");
- };
+ const onChange = () => {
+ theme === "light" ? setTheme("dark") : setTheme("light");
+ };
- const {
- Component,
- slots,
- isSelected,
- getBaseProps,
- getInputProps,
- getWrapperProps,
- } = useSwitch({
- isSelected: theme === "light" || isSSR,
- "aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
- onChange,
- });
+ const {
+ Component,
+ slots,
+ isSelected,
+ getBaseProps,
+ getInputProps,
+ getWrapperProps,
+ } = useSwitch({
+ isSelected: theme === "light" || isSSR,
+ "aria-label": `Switch to ${
+ theme === "light" || isSSR ? "dark" : "light"
+ } mode`,
+ onChange,
+ });
- return (
-
-
-
-
- {!isSelected || isSSR ?
-
- );
+ return (
+
+
+
+
+ {!isSelected || isSSR ? (
+
+
+ );
};
diff --git a/public/props-1.png b/public/props-1.png
new file mode 100644
index 0000000..8b868ef
Binary files /dev/null and b/public/props-1.png differ
diff --git a/public/props-2.png b/public/props-2.png
new file mode 100644
index 0000000..50c7b3c
Binary files /dev/null and b/public/props-2.png differ
diff --git a/public/props-3.png b/public/props-3.png
new file mode 100644
index 0000000..09a76e7
Binary files /dev/null and b/public/props-3.png differ