Skip to content
Twentyfirst UIPro

Medication List

Life · MedicationList, Panel

View as Markdown

Today's doses in order, each with its time, name, dose, a status in words and a "taken" button.

  • status is set by the app, which knows the clock: taken, due, missed or upcoming.
  • onTake(id) adds a button named "Mark Ramipril as taken" to doses that are due or missed.

Today

4 doses · 1 taken

  • 07:30Vitamin D1,000 IUTaken
  • 08:00Metformin500 mg · With breakfastMissed
  • 13:00Ramipril5 mgDue
  • 22:00Magnesium300 mg · Before bedLater

Props

MedicationList

PropTypeNotes
itemsMedicationItem[]Required
onTake?(id: string) => void"Mark as taken" was pressed.
label?stringAccessible name (default "Medication").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
side?boolean
title?string
subtitle?string
action?ReactNode
children?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.