Skip to content

Add EventFilter component and styles for event type selection. #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
danishzayan wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add EventFilter component and styles for event type selection. #344

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a39870
Add EventFilter component and styles for event type selection
danishzayan May 14, 2025
0a79750
Merge branch 'main' of https://github.com/danishzayan/maintainermonth…
danishzayan May 14, 2025
9e6b33a
Update event details for Open Source Friday: Effection
danishzayan May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions components/event-filter/EventFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
38 changes: 38 additions & 0 deletions components/event-filter/event-filter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 14 additions & 0 deletions components/event-filter/eventTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
54 changes: 32 additions & 22 deletions components/events-list/EventsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', {
Expand Down Expand Up @@ -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 || ''),
Expand Down
2 changes: 1 addition & 1 deletion components/events-list/events-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

&__header {
display: flex;
// display: flex;
Copy link

Copilot AI May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] If the commented-out code is no longer needed, consider removing it to keep the codebase clean, or add a comment to explain why it remains commented out.

Suggested change
// display: flex;
// display: flex; // Uncomment if header layout needs to switch to flexbox in the future

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] If the commented-out code is no longer needed, consider removing it to keep the stylesheet clean and maintainable; if it's temporary for debugging, add a comment explaining its purpose.

Suggested change
// display: flex;

Copilot uses AI. Check for mistakes.
align-items: center;
justify-content: space-between;
margin-bottom: spacing(6);
Expand Down
1 change: 1 addition & 0 deletions styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down