1import { css } from '@emotion/react';
2import { spacing, theme, typography } from '@expo/styleguide';
3import React, { PropsWithChildren } from 'react';
4
5import { NavigationRenderProps } from '.';
6
7import { CALLOUT } from '~/ui/components/Text';
8
9type GroupListProps = PropsWithChildren<NavigationRenderProps>;
10
11export function GroupList({ route, children }: GroupListProps) {
12  if (route.type !== 'group') {
13    throw new Error(`Navigation route is not a group`);
14  }
15
16  return (
17    <>
18      <CALLOUT css={textStyle}>{route.name}</CALLOUT>
19      {children}
20    </>
21  );
22}
23
24const textStyle = css({
25  ...typography.utility.weight.medium,
26  borderBottom: `1px solid ${theme.border.default}`,
27  padding: spacing[1],
28  paddingLeft: spacing[4] + spacing[1.5], // padding + icon width
29  marginLeft: spacing[4],
30  marginBottom: spacing[2],
31});
32