1import { css } from '@emotion/react';
2import { borderRadius, iconSize, shadows, spacing, theme, typography } from '@expo/styleguide';
3
4import { NavigationRenderProps } from './types';
5
6import { A, CALLOUT } from '~/ui/components/Text';
7
8export function PageLink({ route, isActive }: NavigationRenderProps) {
9  if (route.type !== 'page') {
10    throw new Error(`Navigation route is not a page`);
11  }
12
13  return (
14    <A css={[linkStyle, isActive && linkStyleActive]} href={route.href}>
15      <i css={[markerStyle, isActive && markerStyleActive]} />
16      <CALLOUT css={[textStyle, isActive && textStyleActive]} tag="span">
17        {route.sidebarTitle || route.name}
18      </CALLOUT>
19    </A>
20  );
21}
22
23const linkStyle = css({
24  display: 'flex',
25  flexDirection: 'row',
26  alignItems: 'center',
27  borderRadius: borderRadius.medium,
28  padding: `${spacing[1.5]}px ${spacing[2]}px`,
29  margin: `${spacing[1]}px ${spacing[4]}px`,
30});
31
32const linkStyleActive = css({
33  boxShadow: shadows.micro,
34  backgroundColor: theme.background.default,
35  '[data-expo-theme="dark"] &': {
36    backgroundColor: theme.background.tertiary,
37  },
38});
39
40const markerStyle = css({
41  flexShrink: 0,
42  backgroundColor: theme.icon.secondary,
43  borderRadius: iconSize.micro,
44  width: iconSize.micro / 2,
45  height: iconSize.micro / 2,
46  marginRight: spacing[2],
47  visibility: 'hidden',
48});
49
50const markerStyleActive = css({
51  visibility: 'visible',
52});
53
54const textStyle = css({
55  color: theme.text.secondary,
56});
57
58const textStyleActive = css({
59  ...typography.utility.weight.medium,
60  color: theme.text.default,
61});
62