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