1import { css } from '@emotion/react';
2import {
3  spacing,
4  theme,
5  SnackLogo,
6  ChangelogIcon,
7  DiscordIcon,
8  MessageIcon,
9} from '@expo/styleguide';
10import { useRouter } from 'next/router';
11
12import { SidebarSingleEntry } from './SidebarSingleEntry';
13import { ArchiveIcon } from './icons/Archive';
14
15import { getPageSection } from '~/common/routes';
16
17export const SidebarFooter = () => {
18  const { pathname } = useRouter();
19  const isArchive = getPageSection(pathname) === 'archive';
20  return (
21    <div css={sidebarFooterContainer}>
22      <SidebarSingleEntry
23        secondary
24        href="/archive"
25        title="Archive"
26        Icon={ArchiveIcon}
27        isActive={isArchive}
28      />
29      <SidebarSingleEntry
30        secondary
31        href="https://snack.expo.dev"
32        title="Expo Snack"
33        Icon={SnackLogo}
34        isExternal
35      />
36      <SidebarSingleEntry
37        secondary
38        href="https://chat.expo.dev"
39        title="Discord"
40        Icon={DiscordIcon}
41        isExternal
42      />
43      <SidebarSingleEntry
44        secondary
45        href="https://forums.expo.dev"
46        title="Forums"
47        Icon={MessageIcon}
48        isExternal
49      />
50      <SidebarSingleEntry
51        secondary
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