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 d62846c7..a53eb4a6 100644 --- a/components/events-list/EventsList.jsx +++ b/components/events-list/EventsList.jsx @@ -1,41 +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 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'; -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' const EventsList = ({ events }) => { - const dateLabel = (event) => - `${event.formattedDate.date} to ${event.formattedDate.endDate}` + 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:description')}

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