add filter category

app/about/galery/page.tsx

@@ -8,7 +8,6 @@ export default function AboutPage() {
       <div className="relative z-10 bg-white w-full mx-auto">
         <Navbar />
         <GallerySection />
-
         <Footer />
       </div>
     </div>

components/dialog/galery-dialog.tsx

@@ -13,12 +13,22 @@ import { Upload, X } from "lucide-react";
 import { useState, useRef, useEffect } from "react";
 import { createGalery, uploadGaleryFile } from "@/service/galery";
 
+const CATEGORY_OPTIONS = [
+  "Grand Opening",
+  "IIMS",
+  "GIIAS",
+  "GJAW",
+  "Exhibitions",
+  "Test Drive",
+];
+
 export function GaleriDialog({ open, onClose, onSubmit }: any) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [files, setFiles] = useState<File[]>([]);
   const [previews, setPreviews] = useState<string[]>([]);
   const fileRef = useRef<HTMLInputElement>(null);
+  const [category, setCategory] = useState("");
 
   useEffect(() => {
     if (!files || files.length === 0) {
@@ -47,10 +57,11 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
   const handleSubmit = async () => {
     try {
       if (!title) return alert("Judul wajib diisi!");
-
+      if (!category) return alert("Category wajib diisi!");
       const formData = new FormData();
       formData.append("title", title);
       formData.append("description", description);
+      formData.append("category", category);
 
       const res = await createGalery(formData);
 
@@ -73,7 +84,7 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
       }
 
       onSubmit();
-
+      setCategory("");
       setTitle("");
       setDescription("");
       setFiles([]);
@@ -106,6 +117,26 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
             />
           </div>
 
+          {/* Category */}
+          <div>
+            <label className="font-medium text-sm">
+              Category <span className="text-red-500">*</span>
+            </label>
+
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="mt-1 h-12 w-full rounded-md border border-gray-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#1F6779]"
+            >
+              <option value="">Pilih category</option>
+              {CATEGORY_OPTIONS.map((cat) => (
+                <option key={cat} value={cat}>
+                  {cat}
+                </option>
+              ))}
+            </select>
+          </div>
+
           {/* Deskripsi */}
           <div>
             <label className="font-medium text-sm">

components/landing-page/galery.tsx

@@ -67,8 +67,7 @@ export default function GallerySection() {
 
   const filteredData = data.filter((item) => {
     if (activeTab === "All") return true;
-    if (activeTab === "Grand Opening") return true; // sementara
+    return item.category === activeTab;
-    return false; // tab lain belum ada konten
   });
 
   return (