creator badge

Prototypr · Jun 16, 2024 · ad60dc8 · ad60dc8
1 parent 57739e6
commit ad60dc8
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 23 deletions.
diff --git a/components/icons/creatorBadge.js b/components/icons/creatorBadge.js
diff --git a/components/icons/index.js b/components/icons/index.js
@@ -727,6 +727,48 @@ export const HandEye = ({ size, className, color }) => {
     </svg>
   );
 };
+export const ShootingStar = ({ size, className, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      viewBox="0 0 256 256"
+    >
+      <path d="M239.35,70.08a13.41,13.41,0,0,0-11.77-9.28l-36.94-2.92L176.43,24.22a13.51,13.51,0,0,0-24.86,0L137.36,57.88,100.42,60.8a13.39,13.39,0,0,0-7.66,23.58l28.06,23.68-8.56,35.39a13.32,13.32,0,0,0,5.1,13.91,13.51,13.51,0,0,0,15,.69L164,139l31.65,19.06a13.54,13.54,0,0,0,15-.69,13.34,13.34,0,0,0,5.09-13.91l-8.56-35.39,28.06-23.68A13.32,13.32,0,0,0,239.35,70.08ZM193.08,99a8,8,0,0,0-2.61,8l8.28,34.21L168.13,122.8a8,8,0,0,0-8.25,0l-30.62,18.43L137.54,107a8,8,0,0,0-2.62-8L108,76.26l35.52-2.81a8,8,0,0,0,6.74-4.87L164,35.91l13.79,32.67a8,8,0,0,0,6.74,4.87l35.53,2.81Zm-105,24.18L29.66,181.66a8,8,0,0,1-11.32-11.32l58.45-58.45a8,8,0,0,1,11.32,11.32Zm10.81,49.87a8,8,0,0,1,0,11.31L45.66,237.66a8,8,0,0,1-11.32-11.32l53.27-53.26A8,8,0,0,1,98.92,173.08Zm73-1a8,8,0,0,1,0,11.32l-54.28,54.28a8,8,0,0,1-11.32-11.32l54.29-54.28A8,8,0,0,1,171.94,172.06Z"></path>
+    </svg>
+  );
+};
+export const Medal = ({ size, className, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      viewBox="0 0 256 256"
+    >
+      <path d="M216,96A88,88,0,1,0,72,163.83V240a8,8,0,0,0,11.58,7.16L128,225l44.43,22.21A8.07,8.07,0,0,0,176,248a8,8,0,0,0,8-8V163.83A87.85,87.85,0,0,0,216,96ZM56,96a72,72,0,1,1,72,72A72.08,72.08,0,0,1,56,96ZM168,227.06l-36.43-18.21a8,8,0,0,0-7.16,0L88,227.06V174.37a87.89,87.89,0,0,0,80,0ZM128,152A56,56,0,1,0,72,96,56.06,56.06,0,0,0,128,152Zm0-96A40,40,0,1,1,88,96,40,40,0,0,1,128,56Z"></path>
+    </svg>
+  );
+};
+export const MedalMilitary = ({ size, className, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      viewBox="0 0 256 256"
+    >
+      <path d="M207,40H49A17,17,0,0,0,32,57v49.21a17,17,0,0,0,10,15.47l62.6,28.45a48,48,0,1,0,46.88,0L214,121.68a17,17,0,0,0,10-15.47V57A17,17,0,0,0,207,40ZM160,56v72.67l-32,14.54L96,128.67V56ZM48,106.21V57a1,1,0,0,1,1-1H80v65.39L48.59,107.12A1,1,0,0,1,48,106.21ZM128,224a32,32,0,1,1,32-32A32,32,0,0,1,128,224Zm80-117.79a1,1,0,0,1-.59.91L176,121.39V56h31a1,1,0,0,1,1,1Z"></path>
+    </svg>
+  );
+};
 export const PenLineSimple = ({ size, className, color }) => {
   return (
     <svg

diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
@@ -8,9 +8,12 @@ import {
   TwitterLogo,
   Globe,
   GithubLogo,
-  CircleWavyCheck
+  CircleWavyCheck,
+  Medal,
 } from "@/components/icons";
 
+import CreatorBadge from "../icons/creatorBadge";
+
 // import SmallCard from "@/components/v4/card/SmallCard/SmallCardB";
 // import ToolLargeCardProfile from "@/components/v4/card/ToolLargeCardProfile";
 import { useRouter } from "next/router";
@@ -97,15 +100,23 @@ const ProfilePageLayout = ({
             <div className="relative max-w-[1320px] mx-auto flex flex-col justify-start">
               <Link href={`/people/${slug}`}>
                 <div className="w-[132px] bg-white h-[132px] mx-auto mt-3 rounded-full border border-1 overflow- relative border-black/10 shadow-sm mb-3">
-                  {(kofi || (unapproved && user?.profile?.kofi)) && (
+                  {/* {(kofi || (unapproved && user?.profile?.kofi)) && (
                     <div className="absolute z-10 bottom-0 mb-1 right-0">
-                      {/* <h2 className="font-medium text-sm mb-2 text-gray-700">Support {author?.firstName?author?.firstName:''}</h2> */}
+                      <h2 className="font-medium text-sm mb-2 text-gray-700">Support {author?.firstName?author?.firstName:''}</h2>
                       <KoFiButton
                         color="#53b1e6"
                         // label={"Buy me a coffee"}
                         kofiId={kofi || user?.profile?.kofi}
                       />
                     </div>
+                  )} */}
+                  {(author.creatorBadge ||
+                    (unapproved && user?.profile?.creatorBadge)) && (
+                    <div className="absolute z-10 bottom-0 -mb-1 right-0.5  text-white">
+                      {/* <div className="rounded-xl bg-blue-600 flex flex-col justify-center w-8 h-8 border border-1 border-gray-200 shadow-sm"> */}
+                      <CreatorBadge />
+                      {/* </div> */}
+                    </div>
                   )}
                   {unapproved ? (
                     <img
@@ -141,7 +152,7 @@ const ProfilePageLayout = ({
               <div className="flex flex-col z-20 relative justify-center w-full gap-5">
                 <Link href={`/people/${slug}`}>
                   <h1 className="text-2xl text-center tracking-tight font-semibold leading-normal text-black/90">
-                    {`${author?.firstName ? author?.firstName :!author?.name ? "New":''} ${author?.lastName ? author?.lastName : !author?.name?"User":''}
+                    {`${author?.firstName ? author?.firstName : !author?.name ? "New" : ""} ${author?.lastName ? author?.lastName : !author?.name ? "User" : ""}
                       ${!author?.firstName && !author?.lastName && author?.name ? author?.name : ""}`}
                   </h1>
                 </Link>
@@ -284,10 +295,7 @@ const ProfilePageLayout = ({
                           href={`https://twitter.com/${twitter || user?.profile?.twitter}`}
                           target="_blank"
                         >
-                          <TwitterLogo
-                            color="rgba(0,0,0,0.8)"
-                            size={24}
-                          />
+                          <TwitterLogo color="rgba(0,0,0,0.8)" size={24} />
                           {/* <img
                           style={{ width: "28px" }}
                           className=" bg-white rounded-full shadow-sm hover:shadow-md"
@@ -303,10 +311,7 @@ const ProfilePageLayout = ({
                           href={`https://dribbble.com/${dribbble || user?.profile?.dribbble}`}
                           target="_blank"
                         >
-                          <DribbbleLogo
-                            color="rgba(0,0,0,0.8)"
-                            size={24}
-                          />
+                          <DribbbleLogo color="rgba(0,0,0,0.8)" size={24} />
 
                           {/* <img
                           style={{ width: "28px" }}
@@ -322,15 +327,30 @@ const ProfilePageLayout = ({
                           href={`https://github.com/${github || user?.profile?.github}`}
                           target="_blank"
                         >
-                          <GithubLogo
-                            color="rgba(0,0,0,0.8)"
-                            size={24}
-                          />
+                          <GithubLogo color="rgba(0,0,0,0.8)" size={24} />
                         </a>
                       )}
                     </div>
                   </div>
                 ) : null}
+                {kofi ? (
+                  <div>
+                    <h3 className="text-gray-500 uppercase font-semibold tracking-wide text-xs my-2">
+                      Support
+                    </h3>
+                    <div className="flex gap-2.5">
+                      {(kofi || (unapproved && user?.profile?.kofi)) && (
+                        <div className="">
+                          <KoFiButton
+                            color="#53b1e6"
+                            label={"Buy me a coffee"}
+                            kofiId={kofi || user?.profile?.kofi}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ) : null}
               </div>
             </div>
             <div className="">
@@ -407,10 +427,10 @@ const ProfilePageLayout = ({
                       Profile pending approval
                     </h2>
                     <p className="mb-3">
-                      For community safety, your
-                      profile is not publicly viewable until manually approved. You can submit posts, but they will only
-                      appear once your account is approved. Complete your
-                      profile to get approved faster.
+                      For community safety, your profile is not publicly
+                      viewable until manually approved. You can submit posts,
+                      but they will only appear once your account is approved.
+                      Complete your profile to get approved faster.
                     </p>
                     <p>
                       {" "}

diff --git a/lib/queries/peopleQuery.js b/lib/queries/peopleQuery.js
@@ -16,6 +16,7 @@ query PostsPage ($pageSize: Int, $page: Int, $slugs: [String], $sort:[String]){
           attributes {
             role:jobrole
             location
+            creatorBadge
             displayName:username
             firstName
             lastName:secondName

diff --git a/lib/queries/singleUserBySlug.js b/lib/queries/singleUserBySlug.js
@@ -4,6 +4,7 @@ export default `
         data {
             attributes {
               role:jobrole
+              creatorBadge
               displayName:username
               firstName
               lastName:secondName

diff --git a/styles/index.scss b/styles/index.scss
@@ -141,7 +141,7 @@ span.kofitext {
   color: #fff !important;
   letter-spacing: -0.15px !important;
   vertical-align: middle;
-  line-height: 33px !important;
+  // line-height: 33px !important;
   padding: 0;
   text-align: center;
   text-decoration: none !important;
@@ -157,10 +157,10 @@ span.kofitext {
 }
 a.kofi-button {
   box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
-  line-height: 36px !important;
+  line-height: 30px !important;
   display: inline-block !important;
   background-color: #29abe0;
-  padding: 2px 12px !important;
+  padding: 1px 8px !important;
   text-align: center !important;
   border-radius: 7px;
   color: #fff;