From f7abb73732aa46ac7e50ef73ce2ba02404dc6f17 Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Sat, 29 Jun 2024 13:43:26 -0400
Subject: [PATCH] done #53, sticky likes bar on posts

---
 components/authorBio.js | 60 ++++++++++++++++-------------------------
 pages/post/[slug].js    |  2 +-
 2 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/components/authorBio.js b/components/authorBio.js
index db33d5b3..bb586cd9 100644
--- a/components/authorBio.js
+++ b/components/authorBio.js
@@ -1,6 +1,7 @@
 import SocialShare from "@/components/SocialShare";
-import Image from 'next/image'
+import Image from "next/image";
 import dynamic from "next/dynamic";
+import { DribbbleLogo, GithubLogo, TwitterLogo } from "./icons";
 
 const KoFiButton = dynamic(
   () => import("@/components/ko-fi-button/Ko-Fi-Button"),
@@ -11,16 +12,14 @@ export default function AuthorBio({ author, slug, title }) {
   const pic = author?.avatar?.data?.attributes?.url
     ? author?.avatar?.data?.attributes?.url
     : author?.legacyAvatar
-    ? author?.legacyAvatar
-    : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
+      ? author?.legacyAvatar
+      : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
 
   const github = getGithubHandle(author?.github);
   const twitter = getTwitterHandle(author?.twitter);
-  const dribbble = getDribbbleHandle(author?.dribbble);  
+  const dribbble = getDribbbleHandle(author?.dribbble);
   const kofi = getKofiHandle(author?.kofi);
 
-
-
   return (
     <div className="py-4">
       <div
@@ -58,12 +57,11 @@ export default function AuthorBio({ author, slug, title }) {
               </a>
             </div>
             <div className="w-full text-center">
-              
               <h1 className="text-xl mt-1 font-semibold leading-normal text-black/90">
                 {/* {author?.name ? author?.name : ""} */}
-                {`${author?.firstName ? author?.firstName:''}
-                  ${author?.lastName ? ' '+author?.lastName:''}
-                  ${(!author?.firstName && !author?.lastName) ? author?.name:''}`}
+                {`${author?.firstName ? author?.firstName : ""}
+                  ${author?.lastName ? " " + author?.lastName : ""}
+                  ${!author?.firstName && !author?.lastName ? author?.name : ""}`}
               </h1>
 
               {author?.jobrole && (
@@ -103,17 +101,17 @@ export default function AuthorBio({ author, slug, title }) {
                   </a>
                 )}
 
-              {kofi ? (
-                        <div className="mr-4 inline-block">
-                          <KoFiButton
-                            color="#53b1e6"
-                            label={"Buy me a coffee"}
-                            kofiId={kofi}
-                          />
-                        </div>
-                      ) : (
-                        ""
-                      )}
+                {kofi ? (
+                  <div className="mr-4 inline-block">
+                    <KoFiButton
+                      color="#53b1e6"
+                      label={"Buy me a coffee"}
+                      kofiId={kofi}
+                    />
+                  </div>
+                ) : (
+                  ""
+                )}
 
                 {twitter && (
                   <a
@@ -121,11 +119,7 @@ export default function AuthorBio({ author, slug, title }) {
                     href={`https://x.com/${twitter}`}
                     target="_blank"
                   >
-                    <img
-                      style={{ width: "28px" }}
-                      className=" bg-white rounded-full shadow-sm hover:shadow-md"
-                      data-src="/static/images/icons/twitter.svg"
-                    />
+                    <TwitterLogo color="rgba(0,0,0,0.8)" size={24} />
                   </a>
                 )}
                 {dribbble && (
@@ -134,11 +128,7 @@ export default function AuthorBio({ author, slug, title }) {
                     href={`https://dribbble.com/${dribbble}`}
                     target="_blank"
                   >
-                    <img
-                      style={{ width: "28px" }}
-                      className=" bg-white rounded-full shadow-sm hover:shadow-md"
-                      data-src="/static/images/icons/dribbble.svg"
-                    />
+                    <DribbbleLogo color="rgba(0,0,0,0.8)" size={24} />
                   </a>
                 )}
                 {github && (
@@ -147,11 +137,7 @@ export default function AuthorBio({ author, slug, title }) {
                     href={`https://github.com/${github}`}
                     target="_blank"
                   >
-                    <img
-                      style={{ width: "28px" }}
-                      className=" bg-white rounded-full shadow-sm hover:shadow-md"
-                      data-src="/static/images/icons/github.svg"
-                    />
+                    <GithubLogo color="rgba(0,0,0,0.8)" size={24} />
                   </a>
                 )}
               </div>
@@ -234,4 +220,4 @@ function getKofiHandle(string) {
   result = result.replace("@", "");
 
   return result;
-}
\ No newline at end of file
+}
diff --git a/pages/post/[slug].js b/pages/post/[slug].js
index dbc38a3e..01fc01bd 100644
--- a/pages/post/[slug].js
+++ b/pages/post/[slug].js
@@ -173,7 +173,7 @@ export default function Post({
           ) : null}
 
           {/* <Alert preview={preview} /> */}
-          <main className="pb-20 gap-2 col-span-12 lg:col-span-12 overflow-hidden px-0 ">
+          <main className="pb-20 gap-2 col-span-12 lg:col-span-12 px-0 ">
             {/* {post?.id && process.env.NODE_ENV === "production" && (
               <WMPostTracker postId={post?.id} post={post} />
             )} */}