feat : Commits, add a division section and and adjust some component

app/[locale]/(public)/schedule/page.tsx

@@ -8,8 +8,9 @@ import React, { useEffect, useState } from "react";
 import { format } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
-const Jadwal = () => {
+const Schedule = () => {
   const city = [
     {
       key: 1,
@@ -64,6 +65,9 @@ const Jadwal = () => {
 
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
+  const [scheduleSearch, setScheduleSearch] = useState();
+  const [todayList, setTodayList] = useState([]);
+
   const curr = new Date();
   const startDays = (curr.getDay() + 7 - 1) % 7;
 
@@ -190,7 +194,7 @@ const Jadwal = () => {
   return (
     <>
       {/* Awal Komponen Kiri */}
-      <div className="relative px-4 lg:px-28 md:py-10 py-4 bg-gray-50 dark:bg-slate-800">
+      <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-gray-50 dark:bg-slate-800">
         <Popover>
           <PopoverTrigger asChild>
             <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
@@ -210,10 +214,10 @@ const Jadwal = () => {
           </PopoverContent>
         </Popover>
 
-        <div className="container relative">
+        <div className="container relative py-4">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <a className="text-black flex flex-row gap-2 py-4 items-center cursor-pointer">
+              <a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                   <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
                 </svg>
@@ -273,8 +277,8 @@ const Jadwal = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-      <div className="flex flex-col lg:flex-row">
+        <div className="flex flex-col lg:flex-row gap-6">
-        <div className="h-[500px] w-3/4 overflow-y-auto">
+          <div className="h-[500px] overflow-y-auto w-3/4 ">
             <div className="container-fluid relative">
               <div className="grid grid-cols-1 mt-8">
                 <div className="relative block bg-white dark:bg-slate-900">
@@ -591,19 +595,59 @@ const Jadwal = () => {
               </div>
             </div>
           </div>
+          <div className="w-1/4 flex flex-col gap-6">
+            <div className="relative text-gray-600 dark:text-white">
+              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                  <g fill="none" fill-rule="evenodd">
+                    <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                  </g>
+                </svg>
+              </span>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Hari Ini
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
+              </div>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Sebelumnya
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
+              </div>
+            </div>
+            <div className="card border border-slate-400 p-2 rounded-lg">
+              <div className="card-header">
+                <a className="accordion-icon">
+                  <h5 className="py-2 theme-text text-left">
+                    Jadwal Selanjutnya
+                    <span className="float-right">
+                      <Icon icon="fa:angle-down" className="ml-1" />
+                    </span>
+                  </h5>
+                </a>
+              </div>
             </div>
           </div>
-      {/* Akhir Komponen Kiri */}
-
-      {/* Awal Komponent Kanan */}
-      <div className="w-1/4">
-        <div>
-          <h1>HALO</h1>
         </div>
       </div>
-      {/* Akhir Komponen Kanan */}
     </>
   );
 };
 
-export default Jadwal;
+export default Schedule;

app/[locale]/page.tsx

@@ -9,6 +9,7 @@ import Coverage from "@/components/landing-page/coverage";
 import Navbar from "@/components/landing-page/navbar";
 import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
+import Division from "@/components/landing-page/division";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
@@ -21,6 +22,7 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
       <PopularContent />
       <ContentCategory />
       <Coverage />
+      <Division />
       <Footer />
     </>
   );

components/landing-page/Navbar.tsx

@@ -14,6 +14,13 @@ const Navbar = () => {
   const pathname = usePathname();
   const params = useParams();
   const locale = params?.locale;
+  const [language, setLanguage] = useState<"id" | "en">("id");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleLanguageChange = (lang: "id" | "en") => {
+    setLanguage(lang);
+    setIsOpen(false);
+  };
 
   return (
     <div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
@@ -113,17 +120,54 @@ const Navbar = () => {
               <img src="/assets/polriTv.png" className="w-20 lg:max-w-screen-lg h-10 flex-auto " />
             </a>
           </div>
-          <select className="bg-transparent dark:text-white text-black border-none focus:outline-none" defaultValue="Indonesia">
+          <div className="relative inline-block text-left">
-            <option>Indonesia</option>
+            {/* Tombol Utama */}
-            <option>English</option>
+            <button onClick={() => setIsOpen(!isOpen)} className="flex items-center space-x-2 p-2 text-gray-700 bg-slate-200 rounded-lg">
-          </select>
+              <img
+                src={language === "id" ? "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" : "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"}
+                alt={language === "id" ? "Ind" : "Eng"}
+                className="w-3 h-3"
+              />
+              <span>{language === "id" ? "Ind" : "Eng"}</span>
+              <span className="text-gray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 32 32">
+                  <path fill="currentColor" d="M8.037 11.166L14.5 22.36c.825 1.43 2.175 1.43 3 0l6.463-11.195c.826-1.43.15-2.598-1.5-2.598H9.537c-1.65 0-2.326 1.17-1.5 2.6z" />
+                </svg>
+              </span>
+            </button>
+
+            {/* Dropdown Menu */}
+            {isOpen && (
+              <div className="absolute right-0 mt-2 w-auto bg-slate-200 border rounded-md shadow-lg z-10">
+                <button onClick={() => handleLanguageChange("id")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "id" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg" alt="Indonesia" className="w-5 h-5" />
+                  <span>Ind</span>
+                </button>
+                <button onClick={() => handleLanguageChange("en")} className={`flex items-center space-x-2 w-full px-4 py-2 ${language === "en" ? "font-medium" : ""}`}>
+                  <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="English" className="w-5 h-5" />
+                  <span>Eng</span>
+                </button>
+              </div>
+            )}
+          </div>
           <ThemeSwitcher />
           <div className="relative text-gray-600 dark:text-white">
-            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 border rounded-full text-sm  focus:outline-none" />
+            <input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none" />
-            <span className="absolute left-2 top-1/2 transform -translate-y-1/2">🔍</span>
+            <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
           </div>
           <div className="flex items-center space-x-2">
-            <button className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">Masuk</button>
+            <Link href="/in/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700">
+              Masuk
+            </Link>
             <button className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-red-600 hover:text-white">Daftar</button>
           </div>
         </div>
@@ -215,8 +259,12 @@ const Navbar = () => {
             <input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" />
           </div>
           <div className="flex flex-col space-y-2">
-            <button className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">Masuk</button>
+            <Link href="/auth" className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
-            <button className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">Daftar</button>
+              Masuk
+            </Link>
+            <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
+              Daftar
+            </Link>
           </div>
         </div>
       )}

components/landing-page/division.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+
+const Division = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [seeAllValue, setSeeAllValue] = useState(false);
+
+  const regions = [
+    { name: "SIBER", logo: "/assets/satker/siber.png" },
+    { name: "DIVKUM", logo: "/assets/satker/divkum.png" },
+    { name: "PUSKEU", logo: "/assets/satker/puskeu.png" },
+    { name: "SSDM", logo: "/assets/satker/ssdm.png" },
+    { name: "ITWASUM", logo: "/assets/satker/itwasum.png" },
+    { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" },
+    { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" },
+    { name: "BRIMOB", logo: "/assets/satker/brimob.png" },
+    { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" },
+    { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" },
+    { name: "BINMAS", logo: "/assets/satker/binmas.png" },
+    { name: "DIV TIK", logo: "/assets/satker/div-tik.png" },
+    { name: "SPRIPIM", logo: "/assets/satker/spripim.png" },
+    { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" },
+    { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
+    { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" },
+    { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" },
+    { name: "POLAIRUD", logo: "/assets/satker/polairud.png" },
+    { name: "POLAIR", logo: "/assets/satker/polair.png" },
+    { name: "POLUDARA", logo: "/assets/satker/poludara.png" },
+    { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" },
+    { name: "AKPOL", logo: "/assets/satker/akpol.png" },
+    { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" },
+    { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" },
+    { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" },
+    { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" },
+    { name: "SLOG", logo: "/assets/satker/slog.png" },
+    { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" },
+    { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" },
+    { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" },
+    { name: "SETUM", logo: "/assets/satker/setum.png" },
+    { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" },
+    { name: "DENSUS 88", logo: "/assets/satker/densus88.png" },
+    { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" },
+    { name: "SOPS", logo: "/assets/satker/sops.png" },
+    { name: "SRENA", logo: "/assets/satker/srena.png" },
+    { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" },
+    { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" },
+  ];
+
+  return (
+    <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
+      {/* Header */}
+      <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
+        Liputan <span className="text-[#bb3523]">Satker</span>
+      </h2>
+      <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
+
+      {/* Pencarian */}
+      <div className="flex items-center justify-center gap-4 mb-6">
+        <input
+          type="text"
+          placeholder="Pencarian"
+          className="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <button className="px-2 lg:px-4 lg:py-2 bg-[#bb3523] text-white rounded-md hover:bg-red-700">Cari Liputan &gt;</button>
+      </div>
+
+      {/* Grid Wilayah */}
+      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6">
+        {regions.map((region, index) =>
+          !seeAllValue ? (
+            index < 7 ? (
+              <div key={index} className="flex flex-col items-center text-center group">
+                <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
+                  <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
+                </div>
+                <p className="text-md font-semibold">{region.name}</p>
+              </div>
+            ) : (
+              ""
+            )
+          ) : (
+            <div key={index} className="flex flex-col items-center text-center group">
+              <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
+                <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
+              </div>
+              <p className="text-md font-semibold">{region.name}</p>
+            </div>
+          )
+        )}
+      </div>
+      <div className="flex justify-center py-5">
+        <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
+          Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Division;