Add EventFilter component and styles for event type selection

- Implement EventFilter component to allow users to filter events by type.
- Create eventTypes.js to define available event types with labels.
- Update EventsList component to integrate EventFilter and manage selected event type.
- Add styles for EventFilter and update existing styles for EventsList.

Author: danishzayan

components/event-filter/EventFilter.jsx

@@ -0,0 +1,23 @@
+import React from 'react';  
+
+const EventFilter = ({ selectedType, setSelectedType, eventTypes }) => {
+  const handleChange = (e) => {
+    setSelectedType(e.target.value);
+  };
+
+  return (
+      <select
+        className="events-list__select"
+        value={selectedType}
+        onChange={handleChange}
+      >
+        {eventTypes.map((type) => (
+          <option key={type.value} value={type.value}>
+            {type.label}
+          </option>
+        ))}
+      </select>
+  );
+};
+
+export default EventFilter;

components/event-filter/event-filter.scss

@@ -0,0 +1,38 @@
+.events-list__controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: spacing(2);
+}
+
+.events-list__select {
+    appearance: none;
+    -webkit-appearance: none;
+    background: rgba(255, 255, 255, 0.4);
+    padding: 12px 10px;
+    margin-top: 8px;
+    border-radius: 100px;
+    border: none;
+
+    color: $white;
+    text-align: center;
+    @extend %subtitle-1;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: $white;
+        color: $purple;
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px $purple;
+    }
+
+    option {
+        background: $purple;
+        color: $white;
+    }
+}

components/event-filter/eventTypes.js

@@ -0,0 +1,14 @@
+import literals from '../../content/commons.json';
+
+const eventTypes = [
+  { value: 'all', label: 'All Events' },
+  { value: 'conference', label: literals['event-type:conference'] },
+  { value: 'podcast', label: literals['event-type:podcast'] },
+  { value: 'stream', label: literals['event-type:stream'] },
+  { value: 'talk', label: literals['event-type:talk'] },
+  { value: 'meetup', label: literals['event-type:meetup'] },
+  { value: 'fundraising', label: literals['event-type:fundraising'] },
+  { value: 'misc', label: literals['event-type:misc'] },
+];
+
+export default eventTypes;

components/events-list/EventsList.jsx

@@ -1,37 +1,47 @@
-import md from 'markdown-it'
-import clsx from 'clsx'
+import React, { useState } from 'react';
+import md from 'markdown-it';
+import clsx from 'clsx';
+import Link from 'next/link';
 
-import Link from 'next/link'
-
-import ButtonLink from '../button-link/ButtonLink'
-
-import { getLiteral } from '../../common/i18n'
-import * as ROUTES from '../../common/routes'
-
-import DateTimeChip from '../date-time-chip/DateTimeChip'
-import EventTypeChip from '../event-type-chip/EventTypeChip'
-import PlayLink from '../play-link/PlayLink'
-import Chip from '../chip/Chip'
+import ButtonLink from '../button-link/ButtonLink';
+import EventFilter from '../event-filter/EventFilter';
+import eventTypes from '../event-filter/eventTypes';
+import { getLiteral } from '../../common/i18n';
+import DateTimeChip from '../date-time-chip/DateTimeChip';
+import EventTypeChip from '../event-type-chip/EventTypeChip';
+import Chip from '../chip/Chip';
 
 const EventsList = ({ events }) => {
+  const [selectedType, setSelectedType] = useState('all');
+  const filteredEvents = selectedType === 'all'
+    ? events
+    : events.filter((event) => event.type === selectedType);
+
   return (
     <section className="events-list">
       <div className="events-list__header">
         <div className="events-list__header-content">
           <h1 className="events-list__title">{getLiteral('schedule:title')}</h1>
           <p className="events-list__subtitle">{getLiteral('schedule:description')}</p>
-          <ButtonLink 
-            href="https://github.com/github/maintainermonth/issues/new?template=add-to-calendar.yml" 
-            isExternal={true}
-            className="events-list__add-button"
-          >
-            {getLiteral('schedule:add-event')}
-          </ButtonLink>
+          <div className="events-list__controls">
+            <ButtonLink
+              href="https://github.com/github/maintainermonth/issues/new?template=add-to-calendar.yml"
+              isExternal={true}
+              className="events-list__add-button"
+            >
+              {getLiteral('schedule:add-event')}
+            </ButtonLink>
+            <EventFilter
+              selectedType={selectedType}
+              setSelectedType={setSelectedType}
+              eventTypes={eventTypes}
+            />
+          </div>
         </div>
       </div>
 
       <div className="events-list__grid">
-        {events.map((event, index) => (
+        {filteredEvents.map((event, index) => (
           <div
             key={event.slug}
             className={clsx('events-list__card', {
@@ -68,7 +78,7 @@ const EventsList = ({ events }) => {
               </div>
 
               <div className="events-list__info">
-                <p 
+                <p
                   className="events-list__text"
                   dangerouslySetInnerHTML={{
                     __html: md().render(event.description || ''),

components/events-list/events-list.scss

@@ -9,7 +9,7 @@
   }
 
   &__header {
-    display: flex;
+    // display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: spacing(6);

styles/styles.scss

@@ -12,6 +12,7 @@
 @import '../components/event-detail/event-detail';
 @import '../components/event-detail/event-detail-wrapper';
 @import '../components/events-list/events-list';
+@import '../components/event-filter/event-filter';
 @import '../components/footer/footer';
 @import '../components/header/header';