Redesign the post footer

Author: sergioalvz

layouts/Post/components/Footer/index.tsx

@@ -1,41 +1,34 @@
-import { capitalize } from "lodash";
-import React from "react";
-import { FaGithub, FaXTwitter } from "react-icons/fa6";
-
 import { ApiArticle } from "@/cms/api/ApiArticle";
 
-type ChipProps = { children: React.ReactNode; href: string; type: "twitter" | "github" };
-
-const Chip = ({ children, href, type }: ChipProps) => {
-  const kype = capitalize(type);
-  const Icon = type === "twitter" ? FaXTwitter : FaGithub;
-
-  const classes = ["Post__Footer__Chip", `Post__Footer__Chip--${kype}`].join(" ");
-
-  return (
-    <a className={classes} href={href} target="blank">
-      <Icon className="Post__Footer__Chip__Icon" />
-      {children}
-    </a>
-  );
-};
-
 type FooterProps = { post: ApiArticle };
 
 export function Footer({ post }: FooterProps) {
-  const githubEditUrl = `https://github.com/codecoolture/codecoolture.com/edit/trunk/cms/content${post.url}.mdx`;
   const shareableUrl = `https://codecoolture.com${post.url}`;
   const tweet = encodeURIComponent(`Check out "${post.title}" by @codecoolture\n\n`);
 
   return (
     <footer className="Post__Footer">
-      <Chip type="twitter" href={`https://x.com/intent/tweet?url=${encodeURIComponent(shareableUrl)}&text=${tweet}`}>
-        Share on Twitter
-      </Chip>
-
-      <Chip type="github" href={githubEditUrl}>
-        Edit on GitHub
-      </Chip>
+      <nav>
+        <ul className="Post__Footer__List">
+          <li className="Post__Footer__ListItem">
+            <a
+              className="Post__Footer__Link"
+              href={`https://x.com/intent/tweet?url=${encodeURIComponent(shareableUrl)}&text=${tweet}`}
+            >
+              Share
+            </a>
+          </li>
+
+          <li className="Post__Footer__ListItem">
+            <a
+              className="Post__Footer__Link"
+              href={`https://github.com/codecoolture/codecoolture.com/edit/trunk/cms/content${post.url}.mdx`}
+            >
+              Edit on GitHub
+            </a>
+          </li>
+        </ul>
+      </nav>
     </footer>
   );
 }

layouts/Post/components/Footer/style.css

@@ -1,35 +1,31 @@
 .Post__Footer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   font-size: var(--fs-s);
-  gap: 1rem;
-  justify-content: center;
-  margin: 3rem 0 1rem;
+  margin: 2rem 0 1rem;
 }
 
-.Post__Footer__Chip {
+.Post__Footer__List {
   align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  max-width: 100%;
-  min-width: calc(200px - 1.5em);
-  padding: 0.35em 0.75em;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  justify-content: end;
 
-  border-radius: 3px;
-  text-decoration: none;
+  list-style-type: none;
 }
 
-.Post__Footer__Chip--Twitter {
-  background-color: #24292f;
-  color: var(--c-white);
+.Post__Footer__ListItem {
+  align-items: center;
+  display: flex;
 }
 
-.Post__Footer__Chip--Github {
-  background-color: #24292f;
-  color: var(--c-white);
+.Post__Footer__ListItem:not(:first-child)::before {
+  content: "·";
+  margin-right: 0.5rem;
+
+  color: var(--c-gray-11);
 }
 
-.Post__Footer__Chip__Icon {
-  margin-right: 0.5em;
+.Post__Footer__Link {
+  color: var(--c-gray-11);
 }