Experience / Application

Events

page
play-fn

Your events — the ones you are going to, hosting, or speaking at.

Distinct from the public events index: this is a personal calendar, so it is ordered by what you have to do next rather than by what is popular, and every row says what you are to the event. Hosting a dinner and being in the audience are the same date and completely different weeks.

The next event is lifted out into a hero. On a list where every row looks alike, the one that matters this week is the one that should not — and it is the only place with room for the event's own picture, which is how you recognise it before you have read anything. The event after it rides along underneath, because "and then?" is the second question anyone asks.

The list can be read two ways. Rows are for scanning a calendar down its left edge; cards are for browsing when you are not sure what you are looking for. Search cuts across both, and past events keep their attendance badge — "I spoke at that" is the reason anyone scrolls back.

Not exported from @meetcard/deck — this is a composed screen, built from the components below rather than shipped as one.

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Events />;

Past events keep their attendance badge — "I spoke at that" is the reason anyone scrolls back — and read newest first.

Past

Source

const Past = () => <Events defaultTab="past" />;

Switching lists. The counts are on the control, so neither is a surprise.

Switching Lists

Source

const SwitchingLists = () => <Events />;

A new account. The empty list points at the next action rather than a void.

No Events

Source

const NoEvents = () => <Events events={[]} />;

Everything is behind you — no featured card, because there is nothing coming to feature.

All Past

Source

const AllPast = () => <Events today="2028-01-01" />;

The page in the shell it actually lives in.

In The Shell

Source

const InTheShell = () => (
  <AppShell currentId="/events">
    <Events />
  </AppShell>
);

Search cuts across the list you are in. It looks at the three things anyone remembers about an event they are trying to find again: what it was called, where it was held, and what town it was in.

Searching

Source

const Searching = () => <Events />;

Nothing matched. The way out is the control that got you here.

Search With No Matches

Source

const SearchWithNoMatches = () => <Events />;

The same events as cards. Rows are for scanning a calendar down its left edge; cards are for browsing when you are not sure what you are after.

Card View

Source

const CardView = () => <Events defaultView="cards" />;

Switching between the two shapes without losing your place in the list.

Switching Views

Source

const SwitchingViews = () => <Events />;

Past events carry what you came away with — the faces and the count. That is the only question anyone asks of an event a year later, and the reason the list is worth scrolling back through.

Past Carries The Cards

Source

const PastCarriesTheCards = () => <Events defaultTab="past" />;

Phone. The cover thumbnails come off the rows — the name needs the width more than the picture does — and the toolbar wraps into stacked controls.

Mobile

Source

const Mobile = () => <Events />;

Props