From 610e56c7af62abc4724478cdbe5a147257a15624 Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Sat, 30 Nov 2024 21:48:32 +0700
Subject: [PATCH] feat : navbar position mobile version and page image detail

---
 app/[locale]/image/filter/page.tsx         | 44 +++++++++++++++++++---
 components/landing-page/LiputanWilayah.tsx | 35 +++++++++++++----
 components/landing-page/Navbar.tsx         | 14 +++++--
 3 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/app/[locale]/image/filter/page.tsx b/app/[locale]/image/filter/page.tsx
index 842c70c8..be105044 100644
--- a/app/[locale]/image/filter/page.tsx
+++ b/app/[locale]/image/filter/page.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
 import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const dummyImage = [
   { id: 1, thumbnail: "/assets/banner-sample.png" },
@@ -12,8 +13,22 @@ const dummyImage = [
   { id: 6, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
 ];
 
+const categories = [
+  { id: 1, title: "HUT HUMAS KE - 73" },
+  { id: 2, title: "OPERASI ZEBRA 2024" },
+  { id: 3, title: "PON XXI" },
+  { id: 4, title: "OPS LILIN NATARU 2024" },
+  { id: 5, title: "HUT HUMAS KE - 72" },
+  { id: 6, title: "OPS MANTAP PRAJA & PILKADA" }
+]
+
+const formatPicture = [
+  { id: 1, title: "PNG" },
+  { id: 2, title: "JPEG" },
+  { id: 3, title: "JPG" },
+]
+
 const FilterPage = () => {
-  const [selectedTab, setSelectedTab] = useState("video");
 
   return (
     <div className="flex flex-col">
@@ -60,22 +75,39 @@ const FilterPage = () => {
             <div>
               <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
               <ul className="mt-2 space-y-2">
-                {["HUT HUMAS KE - 73", "OPERASI ZEBRA 2024", "PON XXI", "OPS LILIN NATARU 2024", "HUT HUMAS KE - 72", "OPS MANTAP PRAJA & PILKADA"].map((category) => (
-                  <li key={category}>
+                {categories.map((category) => (
+                  <li key={category?.id}>
                     <label className="inline-flex items-center">
-                      <input type="checkbox" className="form-checkbox text-red-500 rounded" />
-                      <span className="ml-2 text-gray-700">{category}</span>
+                      <Checkbox id="terms" />
+                      <span className="ml-2 text-gray-700">{category.title}</span>
                     </label>
                   </li>
                 ))}
               </ul>
             </div>
+            {/* Garis */}
+            <div className="border-t border-black my-4"></div>
+            {/* Garis */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
+              <ul className="mt-2 space-y-2">
+                {formatPicture.map((format) => (
+                  <li key={format?.id}>
+                    <label className="inline-flex items-center">
+                      <Checkbox id="terms" />
+                      <span className="ml-2 text-gray-700">{format.title}</span>
+                    </label>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
           </div>
         </div>
 
         {/* Konten Kanan */}
         <div className="flex-1">
-          <div className="flex justify-between items-center mb-4">
+          <div className="flex flex-col items-end mb-4">
             <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
             <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
               <option value="terbaru">Terbaru</option>
diff --git a/components/landing-page/LiputanWilayah.tsx b/components/landing-page/LiputanWilayah.tsx
index 826909e5..c4048e14 100644
--- a/components/landing-page/LiputanWilayah.tsx
+++ b/components/landing-page/LiputanWilayah.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
+import { Button } from "../ui/button";
 
 const LiputanWilayah: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
+  const [seeAllValue, setSeeAllValue] = useState(false);
 
   const regions = [
     { name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
@@ -42,7 +44,6 @@ const LiputanWilayah: React.FC = () => {
     { name: "Internasional", logo: "/assets/polda/internasional.png" },
   ];
 
-  const filteredRegions = regions.filter((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()));
 
   return (
     <div className="max-w-screen-xl mx-auto px-4 py-6">
@@ -66,14 +67,32 @@ const LiputanWilayah: React.FC = () => {
 
       {/* Grid Wilayah */}
       <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-9 gap-6">
-        {filteredRegions.map((region, index) => (
-          <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" />
+        {regions.map((region, index) =>
+          !seeAllValue ? (
+            index < 9 ? (
+              <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>
-            <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 Banyak
+        </Button>
       </div>
     </div>
   );
diff --git a/components/landing-page/Navbar.tsx b/components/landing-page/Navbar.tsx
index 90b95412..d9751034 100644
--- a/components/landing-page/Navbar.tsx
+++ b/components/landing-page/Navbar.tsx
@@ -13,16 +13,24 @@ const Navbar = () => {
   const pathname = usePathname();
 
   return (
-    <div className="bg-white dark:bg-black shadow-md">
+    <div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
       <div className="flex items-center justify-between px-4 py-3 md:px-6">
         {/* Logo */}
         <a href="/" className="flex items-center space-x-2">
-          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-20 h-10 md:w-60 md:h-32 flex" />
+          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-30 h-20 md:w-60 md:h-24 flex" />
         </a>
 
         {/* Mobile Menu Toggle */}
         <button className="text-black size-20 h-10 w-10 md:hidden" onClick={() => setMenuOpen(!menuOpen)}>
-          {menuOpen ? "✖" : "☰"}
+          {menuOpen ? (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path fill="#000" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <path fill="#000" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
+            </svg>
+          )}
         </button>
 
         {/* Desktop Navigation */}