draft for showing active filters

web/src/components/events/EventContainer.tsx

@@ -2,7 +2,7 @@
 
 import { useQueryState, parseAsStringLiteral, parseAsString } from "nuqs";
 import { EventItem } from "./EventItem";
-import { EventFilter } from "./EventFilter";
+import { EventFilter, EventFilterExplained } from "./EventFilter";
 import {
   EventFragment,
   EventCategory,
@@ -140,6 +140,14 @@ export const EventContainer = ({
           activeVenue={venue}
           isVisible={showFilter}
         />
+        <EventFilterExplained
+          eventCategories={filterableCategories}
+          activeCategory={category}
+          eventOrganizers={filterableOrganizers}
+          activeOrganizer={organizer}
+          venues={filterableVenues}
+          activeVenue={venue}
+        />
         {mode === "list" && <EventList events={filteredEvents} />}
         {mode === "calendar" && <EventCalendar events={filteredEvents} />}
       </div>
@@ -147,6 +155,8 @@ export const EventContainer = ({
   );
 };
 
+const ActiveFilterExplained = ({})
+
 const EventList = ({ events }: { events: EventFragment[] }) => {
   return (
     <ul className={styles.eventList}>