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}>

web/src/components/events/EventFilter.tsx

@@ -105,3 +105,50 @@ export const EventFilter = ({
     </div>
   );
 };
+
+export const EventFilterExplained = ({
+  eventCategories,
+  activeCategory,
+  eventOrganizers,
+  activeOrganizer,
+  venues,
+  activeVenue,
+}: {
+  eventCategories: EventCategory[];
+  activeCategory: string | null;
+  eventOrganizers: EventOrganizer[];
+  activeOrganizer: string | null;
+  venues: VenueFragment[];
+  activeVenue: string | null;
+}) => {
+  const category =
+    activeCategory && eventCategories.find((x) => x.slug === activeCategory);
+  const organizer =
+    activeOrganizer && eventOrganizers.find((x) => x.slug === activeOrganizer);
+  const venue = activeVenue && venues.find((x) => x.slug === activeVenue);
+
+  let text = "";
+  if (category && organizer && venue) {
+    text = `${category.name} arrangert av ${organizer.name} ${venue.preposition} ${venue.title}`;
+  } else if (category && organizer) {
+    text = `${category.name} arrangert av ${organizer.name}`;
+  } else if (category) {
+    text = `Kategori: ${category.name}`;
+  } else if (organizer && venue) {
+    text = `Arrangeres av ${organizer.name} ${venue.preposition} ${venue.title}`;
+  } else if (organizer) {
+    text = `Arrangeres av ${organizer.name}`;
+  } else if (venue) {
+    text = `Arrangementer ${venue.preposition} ${venue.title}`;
+  }
+
+  if (text === "") {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.eventFilterExplained}>
+      <h2>{text}</h2>
+    </div>
+  );
+};