Content block
Notes and composer
Gray note cards and a composer opened from Add note.
- Copy the bindings from
- app/
features/ people/ routes/ volunteers/ components/ person-drawer.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ volunteers?person=:id
Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<NotesList
notes={[]}
onAdd={onAdd}
/>
</Form>One
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<NotesList
notes={[
{
id: 'transport',
value: 'Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
]}
onAdd={onAdd}
/>
</Form>Many
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<NotesList
notes={[
{
id: 'transport',
value: 'Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: 'references',
value: 'Called references, both glowing.\nVet confirms current cat is up to date.',
author: 'Dana Whitfield',
updatedAt: 'Nov 3, 2026 at 2:30 PM',
},
]}
onAdd={onAdd}
/>
</Form>Composer opened from Add note
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<NotesList
notes={[
{
id: 'transport',
value: 'Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
]}
onAdd={onAdd}
composer={<div>
<FormTextArea
name="note-editor"
label="Note"
placeholder="Add a note about this person."
value=""
onChange={onChange}
/>
<div
className="mt-4 flex items-center justify-end gap-2"
>
<SecondaryButton
appearance="modern"
onPress={onPress}
>
Cancel
</SecondaryButton>
<PrimaryButton
appearance="modern"
isDisabled
onPress={onPress}
>
Save
</PrimaryButton>
</div>
</div>}
/>
</Form>Search, count and read only
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<NotesList
notes={[
{
id: '0',
value: 'Follow-up 1: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '1',
value: 'Follow-up 2: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '2',
value: 'Follow-up 3: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '3',
value: 'Follow-up 4: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '4',
value: 'Follow-up 5: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '5',
value: 'Follow-up 6: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '6',
value: 'Follow-up 7: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '7',
value: 'Follow-up 8: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '8',
value: 'Follow-up 9: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
{
id: '9',
value: 'Follow-up 10: Available for weekend transport. Prefers email.',
author: 'Staff Test',
updatedAt: 'Nov 4, 2026 at 10:00 AM',
},
]}
/>
</Form>