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