Screen layout

import { useLayoutEffect, useRef, useState } from 'react';
import type { PageHandle } from '@wearables-ui-toolkit/mrbd';

const pageRef = useRef<PageHandle>(null);
const [headerHeight, setHeaderHeight] = useState(0);

useLayoutEffect(() => {
  setHeaderHeight(pageRef.current?.getHeaderHeight() ?? 0);
}, []);

import { Button, ButtonRail, VerticalList } from '@wearables-ui-toolkit/mrbd';

<div className="route-layout">
  <VerticalList className="route-scroller" ariaLabel="Messages">
    {rows}
  </VerticalList>
  <ButtonRail className="route-actions">
    <Button title="Reply" icon={replyIcon} onClick={onReply} />
    <Button title="Mute" icon={muteIcon} onClick={onMute} />
  </ButtonRail>
</div>;

import {
  Button,
  ButtonRail,
  ListItem,
  Page,
  VerticalList,
  type IconSource,
} from '@wearables-ui-toolkit/mrbd';

const replyIcon: IconSource = '/icons/reply.svg';
const readIcon: IconSource = '/icons/read.svg';

export interface Message {
  id: string;
  sender: string;
  body: string;
  time: string;
}

export interface ThreadRouteProps {
  messages: ReadonlyArray<Message>;
  onOpenMessage: (id: string) => void;
  onReply: () => void;
  onMarkRead: () => void;
}

export function ThreadRoute({
  messages,
  onOpenMessage,
  onReply,
  onMarkRead,
}: ThreadRouteProps) {
  return (
    <Page headerText="Field Ops" headerMetadata={`${messages.length} messages`}>
      <div className="thread-layout">
        <VerticalList className="thread-scroller" ariaLabel="Messages">
          {messages.map(message => (
            <ListItem
              key={message.id}
              title={message.sender}
              subtitle={message.body}
              timestamp={message.time}
              onClick={() => onOpenMessage(message.id)}
            />
          ))}
        </VerticalList>
        <ButtonRail className="thread-actions">
          <Button title="Reply" icon={replyIcon} onClick={onReply} />
          <Button title="Mark read" icon={readIcon} onClick={onMarkRead} />
        </ButtonRail>
      </div>
    </Page>
  );
}

import {
  Button,
  ButtonGroup,
  Page,
  TextStyle,
  TextView,
} from '@wearables-ui-toolkit/mrbd';

export interface ConfirmRouteProps {
  onCancel: () => void;
  onConfirm: () => void;
}

export function ConfirmRoute({ onCancel, onConfirm }: ConfirmRouteProps) {
  return (
    <Page headerText="Delete route">
      <div className="confirm-layout">
        <div className="confirm-body">
          <TextView as="h2" textStyle={TextStyle.HEADING2}>
            Delete this route?
          </TextView>
          <TextView textStyle={TextStyle.BODY2}>
            Saved stops are removed from the device.
          </TextView>
        </div>
        <ButtonGroup className="confirm-actions">
          <Button title="Cancel" onClick={onCancel} />
          <Button title="Delete" onClick={onConfirm} />
        </ButtonGroup>
      </div>
    </Page>
  );
}

import {
  ListItem,
  SubNavigationPager,
  VerticalList,
  type SubNavigationItem,
} from '@wearables-ui-toolkit/mrbd';

const TABS: SubNavigationItem[] = [
  { label: 'Recent', icon: '/icons/recent.svg' },
  { label: 'People', icon: '/icons/people.svg' },
  { label: 'Alerts', icon: '/icons/alerts.svg' },
];

<SubNavigationPager items={TABS} homeIndex={0} ariaLabel="Home sections">
  <VerticalList insetForHeader ariaLabel="Recent">{recentRows}</VerticalList>
  <VerticalList insetForHeader ariaLabel="People">{peopleRows}</VerticalList>
  <VerticalList insetForHeader ariaLabel="Alerts">
    <ListItem title="Battery low" subtitle="Charge soon" />
  </VerticalList>
</SubNavigationPager>;