feat: refine footer

src/components/Footer.tsx

@@ -2,27 +2,72 @@ import React from 'react';
 import { OutboundLink } from 'react-ga';
 import { useTranslation } from 'react-i18next';
 import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa';
+import { GoHeart } from 'react-icons/go';
 import styled from 'styled-components';
+import { Section } from '../theme';
+import { mobile } from '../util/css';
 
 const Footer: React.FC = () => {
   const { t } = useTranslation();
 
   return (
     <Container>
-      <LangBox>
-        <a href="/?lng=en">
-          <span role="img" aria-label="English">
-            🇬🇧
-          </span>
-        </a>
-        <a href="/?lng=ja">
-          <span role="img" aria-label="Japanese">
-            🇯🇵
-          </span>
-        </a>
-      </LangBox>
+      <Pane>
+        <Title>Language</Title>
+        <LangBox>
+          <Links>
+            <a href="/?lng=en">
+              <span role="img" aria-label="English">
+                🇬🇧
+              </span>
+            </a>
+            <a href="/?lng=ja">
+              <span role="img" aria-label="Japanese">
+                🇯🇵
+              </span>
+            </a>
+          </Links>
+        </LangBox>
+      </Pane>
 
-      <Box>
+      <Pane>
+        <Title>Community</Title>
+        <ul>
+          <li>
+            <OutboundLink
+              to="https://github.com/uetchy/namae"
+              eventLabel="GitHub Repo"
+              aria-label="Go to GitHub repository"
+              target="_blank"
+            >
+              GitHub
+            </OutboundLink>
+          </li>
+          <li>
+            <OutboundLink
+              to="https://github.com/uetchy/namae/issues"
+              eventLabel="GitHub Issues"
+              aria-label="Go to GitHub Issues"
+              target="_blank"
+            >
+              Issues
+            </OutboundLink>
+          </li>
+          <li>
+            <OutboundLink
+              to="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
+              eventLabel="Blog article"
+              aria-label="Go to blog"
+              target="_blank"
+            >
+              Blog Article
+            </OutboundLink>
+          </li>
+        </ul>
+      </Pane>
+
+      <Pane>
+        <Title>About</Title>
         <p>
           Made with{'  '}
           <span role="img" aria-label="coffee">
@@ -33,74 +78,109 @@ const Footer: React.FC = () => {
             to="https://twitter.com/uechz"
             eventLabel="Author Page"
             aria-label="Author page"
-            target="_blank">
+            target="_blank"
+          >
             <Bold>Yasuaki Uechi</Bold>
           </OutboundLink>
         </p>
-      </Box>
-
-      <ShareBox>
-        <Links>
-          <OutboundLink
-            to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
-              `namae — ${t('title')}`,
-            )}&url=${encodeURIComponent('https://namae.dev')}`}
-            eventLabel="Tweet"
-            aria-label="Tweet this page"
-            target="_blank">
-            <FaTwitter />
-          </OutboundLink>
-          <OutboundLink
-            to="https://www.producthunt.com/posts/namae"
-            eventLabel="ProductHunt"
-            aria-label="Go to ProductHunt page"
-            target="_blank">
-            <FaProductHunt />
-          </OutboundLink>
-          <OutboundLink
-            to="https://github.com/uetchy/namae"
-            eventLabel="GitHub Repo"
-            aria-label="Go to GitHub repository"
-            target="_blank">
-            <FaGithub />
-          </OutboundLink>
-        </Links>
-      </ShareBox>
+        <ShareBox>
+          <Links>
+            <OutboundLink
+              to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+                `namae — ${t('title')}`,
+              )}&url=${encodeURIComponent('https://namae.dev')}`}
+              eventLabel="Tweet"
+              aria-label="Tweet this page"
+              target="_blank"
+            >
+              <FaTwitter />
+            </OutboundLink>
+            <OutboundLink
+              to="https://www.producthunt.com/posts/namae"
+              eventLabel="ProductHunt"
+              aria-label="Go to ProductHunt page"
+              target="_blank"
+            >
+              <FaProductHunt />
+            </OutboundLink>
+            <OutboundLink
+              to="https://github.com/uetchy/namae"
+              eventLabel="GitHub Repo"
+              aria-label="Go to GitHub repository"
+              target="_blank"
+            >
+              <FaGithub />
+            </OutboundLink>
+            <OutboundLink
+              to="https://github.com/sponsors/uetchy"
+              eventLabel="GitHub Sponsors"
+              aria-label="Go to GitHub Sponsors"
+              target="_blank"
+            >
+              <SponsorBadge>
+                <GoHeart size="1.3rem" />
+                <span>Sponsor</span>
+              </SponsorBadge>
+            </OutboundLink>
+          </Links>
+        </ShareBox>
+      </Pane>
     </Container>
   );
 };
 export default Footer;
 
-const Container = styled.div`
+const Container = styled(Section)`
+  --text: #bdbdbd;
+  --background: #404040;
+
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 40px 0;
+  flex-direction: row;
+  justify-content: space-around;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background: var(--background);
+  color: var(--text);
 
   a {
-    color: black;
+    color: var(--text);
     text-decoration: none;
   }
+
+  ul {
+    li {
+      list-style-type: none;
+    }
+  }
+
+  ${mobile} {
+    flex-direction: column;
+  }
 `;
 
-const Box = styled.footer`
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+const Pane = styled.div`
+  font-size: 1rem;
+
+  ${mobile} {
+    margin-bottom: 50px;
+  }
+`;
+
+const Title = styled.h3`
+  margin-bottom: 15px;
+`;
+
+const LangBox = styled.div`
   line-height: 1em;
-  font-size: 0.8rem;
-`;
-
-const LangBox = styled(Box)`
   font-size: 2rem;
-  margin-bottom: 20px;
 `;
 
-const ShareBox = styled(Box)`
+const ShareBox = styled.div`
+  margin-top: 15px;
+  line-height: 1em;
   font-size: 1.5rem;
+  display: flex;
+  align-items: center;
 `;
 
 const Links = styled.div`
@@ -108,10 +188,35 @@ const Links = styled.div`
   align-items: center;
 
   a {
-    margin: 0 3px;
+    margin-right: 10px;
   }
 `;
 
 const Bold = styled.span`
   font-weight: bold;
 `;
+
+const SponsorBadge = styled.div`
+  padding: 5px 13px 5px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 1rem;
+  font-size: 1rem;
+
+  border-radius: 5px;
+  background-color: #f8f9fa;
+  color: black;
+  cursor: pointer;
+
+  transition: opacity 200ms ease-out;
+
+  :hover {
+    opacity: 0.8;
+  }
+
+  svg {
+    color: rgb(236, 69, 171);
+    margin-right: 5px;
+  }
+`;