Add ability to select multiple categories

src/components/FilterBar.tsx

@@ -1,14 +1,13 @@
-
 import { useMemo } from "react";
 import conferencesData from "@/data/conferences.yml";
 import { X } from "lucide-react";
 
 interface FilterBarProps {
-  selectedTag: string;
-  onTagSelect: (tag: string) => void;
+  selectedTags: Set<string>;
+  onTagSelect: (tags: Set<string>) => void;
 }
 
-const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
+const FilterBar = ({ selectedTags, onTagSelect }: FilterBarProps) => {
   const uniqueTags = useMemo(() => {
     const tags = new Set<string>();
     if (Array.isArray(conferencesData)) {
@@ -18,12 +17,12 @@ const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
         }
       });
     }
-    return ["All", ...Array.from(tags)].map(tag => ({
+    return Array.from(tags).map(tag => ({
       id: tag,
       label: tag.split("-").map(word => 
         word.charAt(0).toUpperCase() + word.slice(1)
       ).join(" "),
-      description: tag === "All" ? "All Conferences" : `${tag} Conferences`
+      description: `${tag} Conferences`
     }));
   }, []);
 
@@ -35,11 +34,19 @@ const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
             <button
               key={filter.id}
               title={filter.description}
-              onClick={() => onTagSelect(filter.id)}
+              onClick={() => {
+                const newTags = new Set(selectedTags);
+                if (newTags.has(filter.id)) {
+                  newTags.delete(filter.id);
+                } else {
+                  newTags.add(filter.id);
+                }
+                onTagSelect(newTags);
+              }}
               className={`
                 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                 filter-tag
-                ${selectedTag === filter.id 
+                ${selectedTags.has(filter.id)
                   ? "bg-primary text-white shadow-sm filter-tag-active" 
                   : "bg-neutral-50 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
                 }
@@ -49,9 +56,9 @@ const FilterBar = ({ selectedTag, onTagSelect }: FilterBarProps) => {
             </button>
           ))}
           
-          {selectedTag !== "All" && (
+          {selectedTags.size > 0 && (
             <button
-              onClick={() => onTagSelect("All")}
+              onClick={() => onTagSelect(new Set())}
               className="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                 bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700
                 flex items-center gap-2"

src/pages/Index.tsx

@@ -8,7 +8,7 @@ import { Switch } from "@/components/ui/switch"
 import { parseISO, isValid, isPast } from "date-fns";
 
 const Index = () => {
-  const [selectedTag, setSelectedTag] = useState("All");
+  const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showPastConferences, setShowPastConferences] = useState(false);
 
@@ -25,20 +25,21 @@ const Index = () => {
         const isUpcoming = !deadlineDate || !isValid(deadlineDate) || !isPast(deadlineDate);
         if (!showPastConferences && !isUpcoming) return false;
 
-        // Filter by tag and search query
-        const matchesTag = selectedTag === "All" || (Array.isArray(conf.tags) && conf.tags.includes(selectedTag));
+        // Filter by tags and search query
+        const matchesTags = selectedTags.size === 0 || 
+          (Array.isArray(conf.tags) && conf.tags.some(tag => selectedTags.has(tag)));
         const matchesSearch = searchQuery === "" || 
           conf.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
           (conf.full_name && conf.full_name.toLowerCase().includes(searchQuery.toLowerCase()));
         
-        return matchesTag && matchesSearch;
+        return matchesTags && matchesSearch;
       })
       .sort((a: Conference, b: Conference) => {
         const dateA = a.deadline && a.deadline !== 'TBD' ? parseISO(a.deadline).getTime() : Infinity;
         const dateB = b.deadline && b.deadline !== 'TBD' ? parseISO(b.deadline).getTime() : Infinity;
         return dateA - dateB;
       });
-  }, [selectedTag, searchQuery, showPastConferences]);
+  }, [selectedTags, searchQuery, showPastConferences]);
 
   if (!Array.isArray(conferencesData)) {
     return <div>Loading conferences...</div>;
@@ -49,7 +50,7 @@ const Index = () => {
       <Header onSearch={setSearchQuery} />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="space-y-4 py-4">
-          <FilterBar selectedTag={selectedTag} onTagSelect={setSelectedTag} />
+          <FilterBar selectedTags={selectedTags} onTagSelect={setSelectedTags} />
           <div className="flex items-center gap-2">
             <label htmlFor="show-past" className="text-sm text-neutral-600">
               Show past conferences