diff --git a/components/event-filter/EventFilter.jsx b/components/event-filter/EventFilter.jsx new file mode 100644 index 000000000..385f18500 --- /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 diff --git a/components/event-filter/event-filter.scss b/components/event-filter/event-filter.scss new file mode 100644 index 000000000..f285c02a6 --- /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 000000000..2cf8300c5 --- /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 diff --git a/components/events-list/EventsList.jsx b/components/events-list/EventsList.jsx index d62846c76..f2d61c261 100644 --- a/components/events-list/EventsList.jsx +++ b/components/events-list/EventsList.jsx @@ -1,41 +1,52 @@ +import React, { useState } from 'react' import md from 'markdown-it' import clsx from 'clsx' - 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 * 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) => (
{ )}
-
{ endTime={event.formattedDate.endTime} />
-
{event.language && } {event.location && }
-