From 7a3987025ae200cc5d637568c913f55c81fae5b5 Mon Sep 17 00:00:00 2001 From: Danish Zayan Date: Wed, 14 May 2025 12:09:06 +0530 Subject: [PATCH 1/2] 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. --- components/event-filter/EventFilter.jsx | 23 ++++++++++ components/event-filter/event-filter.scss | 38 ++++++++++++++++ components/event-filter/eventTypes.js | 14 ++++++ components/events-list/EventsList.jsx | 54 ++++++++++++++--------- components/events-list/events-list.scss | 2 +- styles/styles.scss | 1 + 6 files changed, 109 insertions(+), 23 deletions(-) create mode 100644 components/event-filter/EventFilter.jsx create mode 100644 components/event-filter/event-filter.scss create mode 100644 components/event-filter/eventTypes.js diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx new file mode 100644 index 00000000..b6c8576a --- /dev/null +++ b/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 ( + + ); +}; + +export default EventFilter; \ No newline at end of file diff --git a/components/event-filter/event-filter.scss b/components/event-filter/event-filter.scss new file mode 100644 index 00000000..f285c02a --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/event-filter/eventTypes.js b/components/event-filter/eventTypes.js new file mode 100644 index 00000000..bae3ede3 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/components/events-list/EventsList.jsx b/components/events-list/EventsList.jsx index 0176023e..e911e60c 100644 --- a/components/events-list/EventsList.jsx +++ b/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 (

{getLiteral('schedule:title')}

{getLiteral('schedule:description')}

- - {getLiteral('schedule:add-event')} - +
+ + {getLiteral('schedule:add-event')} + + +
- {events.map((event, index) => ( + {filteredEvents.map((event, index) => (
{
-

Date: Wed, 14 May 2025 12:26:13 +0530 Subject: [PATCH 2/2] Update event details for Open Source Friday: Effection --- content/events/2025-05-30-effection.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/content/events/2025-05-30-effection.md b/content/events/2025-05-30-effection.md index 3cea48b2..3942d47e 100644 --- a/content/events/2025-05-30-effection.md +++ b/content/events/2025-05-30-effection.md @@ -1,20 +1,18 @@ --- title: 'Open Source Friday: Effection' -metaTitle: 'Open Source Friday: Effection' -metaDesc: 'Join Charles Lowell to discuss Effection - Structured Concurrency and Effects for JavaScript.' -date: '05/30' +metaTitle: 'Open Source Friday: Nuxt and AI' +metaDesc: 'Join Daniel Roe to discuss Nuxt, AI, and improving developer experiences with type inference.' +date: '05/23' UTCStartTime: '6:00' UTCEndTime: '7:00' type: 'stream' -language: 'English' location: 'Virtual' +language: 'English' userName: 'GitHub' userLink: 'https://www.twitch.tv/github/schedule' linkUrl: 'https://www.twitch.tv/github/schedule' --- -Join [Charles Lowell](https://github.com/cowboyd) to discuss [Effection](https://github.com/thefrontside/effection) - Structured Concurrency and Effects for JavaScript. - -Effection provides guardrails for managing complex asynchronous operations, helping developers write clean and crisp code. +Join Charles Lowell [@cowboyd](https://github.com/cowboyd) to learn more about [Effection](https://github.com/thefrontside/effection), structured concurrency and effects for JavaScript. [Open Source Fridays](https://www.youtube.com/playlist?list=PL0lo9MOBetEFmtstItnKlhJJVmMghxc0P) stream weekly on GitHub's [Twitch](https://www.twitch.tv/github), [YouTube](https://github.com/youtube), and [LinkedIn](https://www.linkedin.com/company/github).