Selection Sheet

type Option = {
  id: string;
  label: string;
};

const options: Option[] = [
  { id: '1', label: 'First' },
  { id: '2', label: 'Second' },
  { id: '3', label: 'Third' },
];

function SelectionSheet({
  pop,
}: SurfaceContext<Option>) {
  return (
    <Surface.Body>
      <Surface.Header
        title="Choose an option"
        centerTitle
        onPop={() => pop()}
      />

      <Surface.Content>
        {options.map((option) => (
          <button
            key={option.id}
            onClick={() => pop(option)}
          >
            {option.label}
          </button>
        ))}
      </Surface.Content>
    </Surface.Body>
  );
}

const selected = await Surface.Sheet.present<Option>({
  position: 'bottom',
  size: 'large',
  body: SelectionSheet,
});