1import { css } from '@emotion/react';
2import {
3  spacing,
4  theme,
5  SnackLogo,
6  ChangelogIcon,
7  DiscordIcon,
8  MessageIcon,
9  iconSize,
10} from '@expo/styleguide';
11import { useRouter } from 'next/router';
12
13import { SidebarSingleEntry } from './SidebarSingleEntry';
14import { ArchiveIcon } from './icons/Archive';
15
16import { getPageSection } from '~/common/routes';
17import { customIconContainerStyle } from '~/ui/components/Sidebar/icons/styles';
18
19export const SidebarFooter = () => {
20  const { pathname } = useRouter();
21  return (
22    <div css={sidebarFooterContainer}>
23      <SidebarSingleEntry
24        href="/archive"
25        title="Archive"
26        Icon={() => (
27          <div css={[customIconContainerStyle, { width: iconSize.sm }]}>
28            <ArchiveIcon />
29          </div>
30        )}
31        isActive={getPageSection(pathname) === 'archive'}
32      />
33      <SidebarSingleEntry
34        href="https://snack.expo.dev"
35        title="Expo Snack"
36        Icon={SnackLogo}
37        isExternal
38      />
39      <SidebarSingleEntry
40        href="https://chat.expo.dev"
41        title="Discord"
42        Icon={DiscordIcon}
43        isExternal
44      />
45      <SidebarSingleEntry
46        href="https://forums.expo.dev"
47        title="Forums"
48        Icon={MessageIcon}
49        isExternal
50      />
51      <SidebarSingleEntry
52        href="https://expo.dev/changelog"
53        title="Changelog"
54        Icon={ChangelogIcon}
55        isExternal
56      />
57    </div>
58  );
59};
60
61const sidebarFooterContainer = css({
62  display: 'flex',
63  flexDirection: 'column',
64  padding: spacing[4],
65  borderTop: `1px solid ${theme.border.default}`,
66  background: theme.background.default,
67});
68