pull main

2025-06-02 08:24:19 +07:00 · 2025-06-02 08:24:19 +07:00 · b878e762fb
parent 4657f79556
commit b878e762fb
4 changed files with 135 additions and 17 deletions
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
@ -14,6 +14,9 @@ import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/co
 import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara";
 import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara";
 import HeroNew from "@/components/landing-page/hero-new";
+import Navbar from "@/components/landing-page/navbar";
+import SearchSection from "@/components/landing-page/search-section";
+import Footer from "@/components/landing-page/footer";

 const page = () => {
  const params = useParams();
@ -31,13 +34,21 @@ const page = () => {
      <NewsTickerKaltara />
    </div>
  ) : (
+    // <div>
+    //   {/* <HeaderBanner /> */}
+    //   <HeroNew group="polda" />
+    //   <WelcomePolda />
+    //   <NewContent group="polda" type="latest" />
+    //   <NewContent group="polda" type="popular" />
+    //   <ContentCategory type="" group="polda" />
+    // </div>
    <div>
-      {/* <HeaderBanner /> */}
+      <Navbar />
      <HeroNew group="polda" />
-      <WelcomePolda />
-      <NewContent group="polda" type="latest" />
-      <NewContent group="polda" type="popular" />
-      <ContentCategory type="" group="polda" />
+      <div className="flex-1 ">
+        <SearchSection />
+      </div>
+      <Footer />
    </div>
  );
 };
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@ -1,18 +1,11 @@
 "use client";

 import SearchSection from "@/components/landing-page/search-section";
-import NewContent from "@/components/landing-page/new-content";
-import PopularContent from "@/components/landing-page/popular-content";
-import ContentCategory from "@/components/landing-page/content-category";
-import Coverage from "@/components/landing-page/coverage";
-import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
-import Division from "@/components/landing-page/division";
 import Navbar from "@/components/landing-page/navbar";
 import { ReactLenis } from "@studio-freight/react-lenis";
 import MountedProvider from "@/providers/mounted.provider";
-import NewsTicker from "@/components/landing-page/news-tickers";
-import AreaCoverageWorkUnits from "@/components/landing-page/area-coverage-and-work-units";
+
 import HeroNew from "@/components/landing-page/hero-new";

 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
--- a/components/landing-page/scrollable-content-polda.tsx
+++ b/components/landing-page/scrollable-content-polda.tsx
@ -0,0 +1,113 @@
+import search from "@/app/[locale]/(protected)/app/chat/components/search";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import router from "next/router";
+import React, { useEffect, useState } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import Image from "next/image";
+import { getHeroData } from "@/service/landing/landing";
+import { title } from "process";
+import { htmlToString } from "@/utils/globals";
+import { Link } from "@/i18n/routing";
+
+const ScrollableContentPolda = () => {
+  const [contentType, setContentType] = useState("all");
+  const [search, setSearch] = useState("");
+  const router = useRouter();
+  const params = useParams();
+  const locale = params?.locale;
+  const t = useTranslations("LandingPage");
+  const poldaName: any = params?.polda_name;
+  const [content, setContent] = useState<any>();
+  useEffect(() => {
+    async function fetchCategories() {
+      const url = "https://netidhub.com/api/csrf";
+
+      try {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error("Fetch error: ", error);
+      }
+    }
+
+    fetchCategories();
+    initFetch();
+  }, []);
+
+  const initFetch = async () => {
+    const response = await getHeroData();
+    console.log(response);
+    let data = response?.data?.data?.content;
+
+    setContent(data);
+  };
+  return (
+    <>
+      <div className="">
+        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
+          <span className="text-[#c03724] dark:text-white">
+            {t("welcome")} DI POLDA {poldaName?.replace("-", " ")}
+          </span>
+          <span className="text-[#c03724] dark:text-white">
+            &nbsp;{t("download")}&nbsp;{t("coverage")}
+          </span>{" "}
+        </h1>
+        <div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div>
+        <div className="w-full h-1 bg-[#bb3523] mx-auto"></div>
+        <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">{t("officialCoverage")}</p>
+
+        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
+          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
+            <Select value={contentType} onValueChange={setContentType}>
+              <SelectTrigger className="w-[180px] h-[55px]">
+                <span className="text-black">
+                  <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="all">{t("allContent")}</SelectItem>
+                  <SelectItem value="image">{t("image")}</SelectItem>
+                  <SelectItem value="video">{t("video")}</SelectItem>
+                  <SelectItem value="document">{t("text")}</SelectItem>
+                  <SelectItem value="audio">{t("audio")}</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
+              <span className="material-icons text-black dark:text-white px-4">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <path
+                    fill="currentColor"
+                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+                  />
+                </svg>
+              </span>
+              <input type="text" placeholder={t("searchCoverageHere")} className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+            </div>
+          </div>
+          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+            {t("searchCoverage")}
+            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ScrollableContentPolda;
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@ -11,6 +11,7 @@ import ContentCategory from "./content-category";
 import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
 import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
+import ScrollableContentPolda from "./scrollable-content-polda";

 const LeftBanner = () => (
  <div className="sticky top-0 space-y-4">
@ -38,10 +39,10 @@ const SearchSection = () => {
      </div>

      <div className="w-full xl:w-[70%] px-4 py-8 bg-white">
-        <ScrollableContent />
-        <NewContent group="mabes" type="latest" />
-        <NewContent group="mabes" type="popular" />
-        <ContentCategory group="mabes" type="popular" />
+        <ScrollableContentPolda />
+        <NewContent group="polda" type="latest" />
+        <NewContent group="polda" type="popular" />
+        <ContentCategory group="polda" type="popular" />
        <AreaCoverageWorkUnits />
        <EventCalender />
        <UserSurveyBox />