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