Add help translate

Author: lujjjh

components/content/index.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react'
+import styled from 'styled-components'
+
+import MaxWidthWrapper from 'components/max-width-wrapper'
+import Spacer from 'components/spacer'
+
+const Wrapper = styled.div`
+  h1 {
+    margin: 2rem 0 1rem;
+    font-size: 1.875rem;
+  }
+
+  h2 {
+    margin: 1rem 0;
+    font-size: 1.5rem;
+  }
+`
+
+export type ContentProps = PropsWithChildren<{}>
+
+const Content = ({ children }: ContentProps) => (
+  <Wrapper>
+    <Spacer size="6.75rem" />
+
+    <MaxWidthWrapper>{children}</MaxWidthWrapper>
+  </Wrapper>
+)
+
+export default Content

components/footer/index.tsx

@@ -1,17 +1,59 @@
+import useTranslation from 'next-translate/useTranslation'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import styled from 'styled-components'
 
 import MaxWidthWrapper from 'components/max-width-wrapper'
 
 const Wrapper = styled.div`
   padding: 2rem 0;
   font-size: 0.875rem;
+
+  & > ${MaxWidthWrapper} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+`
+
+const Copyright = styled.div`
+  flex: 1;
   opacity: 0.8;
 `
 
-const Footer = () => (
-  <Wrapper>
-    <MaxWidthWrapper>&copy; 2021-{new Date().getFullYear()} LinearMouse</MaxWidthWrapper>
-  </Wrapper>
-)
+const Links = styled.ol`
+  display: flex;
+  gap: 1rem;
+
+  &,
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    color: var(--color-text);
+    text-decoration: none;
+    font-weight: 500;
+  }
+`
+
+const Footer = () => {
+  const { t } = useTranslation('common')
+
+  return (
+    <Wrapper>
+      <MaxWidthWrapper>
+        <Copyright>&copy; 2021-{new Date().getFullYear()} LinearMouse</Copyright>
+
+        <Links>
+          <a href="https://crowdin.com/profile/lujjjh" target="_blank" rel="noreferrer noopener">
+            {t('footer.help_translate')}
+          </a>
+        </Links>
+      </MaxWidthWrapper>
+    </Wrapper>
+  )
+}
 
 export default Footer

components/language-select/index.tsx

@@ -69,7 +69,7 @@ const LanguageSelect = () => {
       <span>{t('navigation.language')}</span>
       <menu>
         {Object.entries(localesToShow).map(([locale, language]) => (
-          <Link key={locale} href="/" locale={locale}>
+          <Link key={locale} href="" locale={locale}>
             <a onClick={() => persistLocale(locale)}>{language}</a>
           </Link>
         ))}

i18n.js

@@ -34,6 +34,7 @@ module.exports = {
   ],
   pages: {
     '*': ['common'],
-    '/': ['index']
+    '/': ['index'],
+    '/contributing': ['contributing']
   }
 }

locales/en/common.json

@@ -3,5 +3,8 @@
     "github": "GitHub",
     "discussions": "Discussions",
     "language": "Language"
+  },
+  "footer": {
+    "help_translate": "Help translate"
   }
 }

locales/en/contributing.json

@@ -0,0 +1,3 @@
+{
+  "title": "Contributing | LinearMouse"
+}