Build / Organisms

PrivateNote

organism
play-fn

The back of a business card — what you scribble on it after meeting someone.

Two questions, in the order you can actually answer them. The feeling is a single tap while you are still standing there; the note is for later, when you remember the thing that will bring the person back to mind. Making the tap first means the card is never left blank just because there was no time to write.

The privacy line is not decoration. A note about a person, attached to that person's card, is the kind of thing people hesitate over — saying plainly that it stays on this device is what makes it usable.

Dashed borders throughout, to read as something written rather than published — the card's front is set type, this is a pencil mark.

import { PrivateNote } from '@meetcard/deck'

Example

<PrivateNote value={note} onValueChange={setNote} feeling={feeling} onFeelingChange={setFeeling} onHide={flipBack} />

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.

Blank, as it appears the first time you turn a card over.

Default

Source

const Default = () => <PrivateNote onHide={fn()} />;

Filled in — a feeling picked and something worth remembering written down.

Written

Source

const Written = () => <PrivateNote
    onHide={fn()}
    feeling="hot"
    value="Met by the coffee cart. Wants an intro to Priya about the pilot." />;

The feeling is one tap, which is all you have while still standing there.

Picking A Feeling

Source

const PickingAFeeling = () => <Harness />;

Props

Prop	Type	Default	Description
`className`	`string`	—	—
`feeling`	`'hot' \| 'warm' \| 'cold'`	—	—
`hideLabel`	`string`	`'Hide'`	—
`onFeelingChange`	`(feeling: ConnectionFeeling) => void`	—	—
`onHide`	`() => void`	—	Dismiss the note and return to the card's face.
`onValueChange`	`(value: string) => void`	—	—
`privacyLabel`	`ReactNode`	`'Private to you · This device only'`	Overrides the reassurance line, e.g. when notes do sync.
`value`	`string`	—	The note text. Controlled.