Experience / Application

My Cards

page
play-fn

My cards — how you appear when you share.

The pile is the point: these are objects you hand over, so they are shown as the artifact rather than as rows in a settings form. Editing sits directly beneath the card it changes and updates it as you type, because the question a person actually has here is "what will they see", and answering it in a separate preview pane is answering it late.

Nothing persists. Deck has no data layer, and a page that pretended otherwise would be documenting a promise the system cannot keep.

The list under the pile is CardIndex, the same component the Connections pile is indexed with. Both pages ask one question — which of these is on top, and how do I get to another — and answering it twice is how two lists end up disagreeing about what "current" looks like.

Three deviations from the product's own screen, all deliberate:

- The "All cards" rows select the card in the pile rather than linking to /cards/<slug>. That route does not exist here, and a dead link is worse than a working selection. - Every row's edit control is visible, where the product reveals it on hover. Hover does not exist on a phone, and a control that appears only for a mouse is a control half the people using this cannot find. - No portrait/landscape toggle. Orientation is not a property of a card here; the pile picks it from the space it has — portrait on a phone, landscape from sm up — and both are the same 3.5x2in object turned. A control that let you pin one would be offering a choice the room has already made.

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.

The page on its own — two cards, the Business one on top.

Default

Source

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

Editing updates the card above it as you type. That is the whole reason the form sits under the artifact rather than beside a preview.

Editing Live

Source

const EditingLive = () => <MyCards />;

Choosing a row moves the pile, rather than following a link nowhere.

Selecting From The List

Source

const SelectingFromTheList = () => <MyCards />;

Editing from the list rather than from the card. The pencil belongs to its own row, so it brings that card to the top on the way to the editor — otherwise it would open the editor on whichever card happened to be showing, which is not the one you pointed at.

Editing From The List

Source

const EditingFromTheList = () => <MyCards />;

Sharing hands over the active card's own link.

Sharing

Source

const Sharing = () => <MyCards shareOpen />;

Making one lands you on it, with the editor already open — the only reason CardPile needed a controlled index.

Creating A Card

Source

const CreatingACard = () => <MyCards />;

In the shell it renders under, at the rail's /cards destination.

In App Shell

Source

const InAppShell = () => (
  <AppShell currentId="/cards">
    <MyCards />
  </AppShell>
);

Phone. The page is desk-first, but it is reachable by link.

Mobile

Source

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

Props

Prop	Type	Default	Description
`cards`	`MyCard[]`	`[ { slug: 'alex@northwind', kind: 'Business', name: 'Alex Rivera', tagline: "Let's find the overlap.", title: 'Design Lead', company: 'Northwind Studio', location: 'Boulder, Colorado', }, { slug: 'alex', kind: 'Personal', name: 'Alex Rivera', tagline: 'Off the clock.', title: 'Personal profile', location: 'Boulder, Colorado', }, ]`	Seeds the page. Edits stay local — Deck has no data layer.
`shareOpen`	`boolean`	`false`	Opens the share sheet on mount, for stories.