fixing data fetching from external API, spesifically in achievement and projects categories and name of team member

groups/ACAAB/src/components/ProjectCarousel.tsx

@@ -23,7 +23,7 @@ export default function ProjectCarousel() {
   const [filterYear, setFilterYear] = useState('');
 
   const categories = useMemo(
-    () => [...new Set(projects.map((p) => p.category))].sort(),
+    () => [...new Set(projects.flatMap((p) => p.category))].sort(),
     [projects]
   );
   
@@ -40,9 +40,9 @@ export default function ProjectCarousel() {
         !q ||
         p.title.toLowerCase().includes(q) ||
         p.studentName.toLowerCase().includes(q) ||
-        p.category.toLowerCase().includes(q) ||
+        p.category.join(' ').toLowerCase().includes(q) ||
         p.description.toLowerCase().includes(q);
-      const matchCategory = !filterCategory || p.category === filterCategory;
+      const matchCategory = !filterCategory || p.category.includes(filterCategory);
       const matchYear = !filterYear || String(p.year) === filterYear;
       return matchSearch && matchCategory && matchYear;
     });
@@ -271,11 +271,15 @@ export default function ProjectCarousel() {
                         <h4 className="text-lg font-bold font-display text-white leading-snug mb-1">
                           {project.title}
                         </h4>
-                        {project.category && (
-                          <span className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider">
-                            <Tag size={10} />
-                            {project.category}
-                          </span>
+                        {project.category && project.category.length > 0 && (
+                          <div className="flex flex-wrap gap-2 mt-1">
+                            {project.category.map((cat, i) => (
+                              <span key={i} className="inline-flex items-center gap-1 text-[10px] font-bold text-primary-gold uppercase tracking-wider bg-black/30 px-2 py-1 rounded backdrop-blur-sm">
+                                <Tag size={10} />
+                                {cat}
+                              </span>
+                            ))}
+                          </div>
                         )}
                       </div>
                     </div>