1import { css } from '@emotion/react'; 2import { breakpoints, spacing, theme } from '@expo/styleguide'; 3import { useRouter } from 'next/router'; 4 5import { ForumsLink, GitHubLink, IssuesLink, SourceCodeLink } from './Links'; 6 7import { NewsletterSignUp } from '~/ui/components/Footer/NewsletterSignUp'; 8import { PageVote } from '~/ui/components/Footer/PageVote'; 9import { UL } from '~/ui/components/Text'; 10 11const NEWSLETTER_DISABLED = true as const; 12 13type Props = { 14 title: string; 15 sourceCodeUrl?: string; 16}; 17 18export const Footer = ({ title, sourceCodeUrl }: Props) => { 19 const router = useRouter(); 20 21 const isAPIPage = router.asPath.includes('/sdk/'); 22 23 return ( 24 <footer css={footerStyle}> 25 <UL css={linksListStyle}> 26 <ForumsLink isAPIPage={isAPIPage} title={title} /> 27 {isAPIPage && <IssuesLink title={title} />} 28 {isAPIPage && sourceCodeUrl && ( 29 <SourceCodeLink title={title} sourceCodeUrl={sourceCodeUrl} /> 30 )} 31 {router && <GitHubLink pathname={router.pathname} />} 32 </UL> 33 <PageVote /> 34 {!NEWSLETTER_DISABLED && <NewsletterSignUp />} 35 </footer> 36 ); 37}; 38 39const footerStyle = css({ 40 display: 'flex', 41 flexDirection: 'row', 42 borderTop: `1px solid ${theme.border.default}`, 43 marginTop: spacing[10], 44 paddingTop: spacing[10], 45 46 [`@media screen and (max-width: ${(breakpoints.medium + breakpoints.large) / 2}px)`]: { 47 flexDirection: 'column', 48 }, 49}); 50 51const linksListStyle = css({ 52 flex: 1, 53 listStyle: 'none', 54 marginLeft: 0, 55 marginBottom: spacing[5], 56}); 57