1import { css } from '@emotion/react';
2import {
3  borderRadius,
4  spacing,
5  theme,
6  typography,
7  iconSize,
8  ArrowUpRightIcon,
9} from '@expo/styleguide';
10import { IconProps } from '@expo/styleguide/dist/types';
11import { ComponentType } from 'react';
12
13import { A } from '../Text';
14
15type SidebarSingleEntryProps = {
16  href: string;
17  title: string;
18  Icon: ComponentType<IconProps>;
19  isActive?: boolean;
20  isExternal?: boolean;
21};
22
23export const SidebarSingleEntry = ({
24  href,
25  title,
26  Icon,
27  isActive = false,
28  isExternal = false,
29}: SidebarSingleEntryProps) => {
30  return (
31    <A href={href} css={[entryContainerStyle, isActive && activeEntryContainerStyle]} isStyled>
32      <Icon
33        css={entryIconStyle}
34        color={isActive ? theme.text.link : theme.icon.default}
35        width={iconSize.sm}
36      />
37      <span>{title}</span>
38      {isExternal && (
39        <ArrowUpRightIcon color={theme.icon.secondary} css={css({ marginLeft: 'auto' })} />
40      )}
41    </A>
42  );
43};
44
45const entryContainerStyle = css({
46  ...typography.fontSizes[14],
47  minHeight: 38,
48  lineHeight: '100%',
49  padding: `${spacing[2]}px ${spacing[3]}px`,
50  color: theme.text.secondary,
51  marginBottom: spacing[1.5],
52  cursor: 'pointer',
53  display: 'flex',
54  alignItems: 'center',
55  userSelect: 'none',
56  transition: 'color 100ms',
57  textDecoration: 'none',
58
59  '&:last-of-type': {
60    marginBottom: 0,
61  },
62
63  '&:hover': {
64    color: theme.text.default,
65  },
66});
67
68const activeEntryContainerStyle = css({
69  color: theme.text.default,
70  fontWeight: 500,
71  background: theme.background.element,
72  borderRadius: borderRadius.md,
73
74  '.dark-theme &': {
75    backgroundColor: theme.background.element,
76  },
77});
78
79const entryIconStyle = css({
80  marginRight: spacing[2.5],
81});
82