author/creator

Prototypr · Feb 11, 2024 · 69fa7b1 · 69fa7b1
1 parent bf94eed
commit 69fa7b1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/components/toolbox/AuthorCard.js b/components/toolbox/AuthorCard.js
@@ -1,6 +1,7 @@
 import Image from 'next/image'
+import Link from 'next/link'
+export default function AuthorCard({ author = {},title, avatar='' }) {
 
-export default function AuthorCard({ author = {}, avatar='' }) {
     let attributes = {};
     if (author.data && author.data.attributes) {
         //displayName firstName lastName avatar
@@ -17,12 +18,12 @@ export default function AuthorCard({ author = {}, avatar='' }) {
 
     return (
         <>
-            <div className="mb-6 md:mb-0 bg-white border-gray-300 p-5 block md:block rounded-lg">
-                <a>
-                    <h1 tabIndex={0} className="text-sm font-semibold mb-3">{attributes.title ? attributes.title : "Posted by"}</h1>
+            <div className="md:mb-0 bg-white border-gray-300 block md:block rounded-lg">
+                <Link href={`/people/${attributes?.slug}`}>
+                    {/* <h1 tabIndex={0} className="text-sm font-medium mb-3">{title?title:attributes.title ? attributes.title : "Posted by"}</h1> */}
                     <div className="py-2 w-full relative flex">
                         <div className="relative mr-3">
-                            <div className="w-12 h-12 rounded-full border border-1 overflow-hidden relative border-gray-100 shadow-sm">
+                            <div className="w-16 h-16 rounded-full border border-1 overflow-hidden relative border-gray-100 shadow-sm">
                                 {
                                     (pic) && <Image 
                                     tabIndex={0}
@@ -40,9 +41,10 @@ export default function AuthorCard({ author = {}, avatar='' }) {
                                 {username}
                             </p>
                             <p tabIndex={0} className="text-sm">Editor</p>
+                           {title? <h1 tabIndex={0} className="text-sm mt-2">{title}</h1>:null}
                         </div>
                     </div>
-                </a>
+                </Link>
             </div>
         </>
     )

diff --git a/components/v4/layout/ToolLargeCardRow.js b/components/v4/layout/ToolLargeCardRow.js
@@ -28,7 +28,6 @@ const ToolLargeCardRow = ({ tools , showTitle}) => {
       </div>:''}
       <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-8`}>
         {tools.map((tool, index) => {
-          console.log(tool)
           return (
             <div key={index}>
               <ToolImageCardSingle post={tool} />

diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
@@ -41,6 +41,7 @@ import Link from "next/link";
 import Button from "@/components/Primitives/Button";
 import { TOTAL_STATIC_POSTS } from "@/lib/constants";
 import ToolLargeCardRow from "@/components/v4/layout/ToolLargeCardRow";
+import AuthorCard from "@/components/toolbox/AuthorCard";
 
 const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
   const { user } = useUser();
@@ -210,6 +211,25 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                       : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"
                   }
                 />:''}
+                 {post?.attributes?.author && (
+                  <>
+                  <h1 tabIndex={0} className="mt-10 text-sm mb-3 font-semibold">{post?.attributes?.creator?'Contributors':'Posted by'}</h1> 
+                            <div className=" mb-3 flex">
+                              <AuthorCard
+                                title={post?.attributes?.creator?"Curator":null}
+                                author={post.attributes.author}
+                                avatar={post.attributes?.author}
+                              />
+                              {post.attributes?.creator ?<div className="ml-10">
+                                <AuthorCard
+                                title={post?.attributes?.creator?"Creator":null}
+                                author={post.attributes.creator}
+                                  avatar={post.attributes?.creator}
+                                />
+                              </div>:null}
+                            </div>
+                  </>
+                          )}
                   </div>
                 </div>
           </div>
@@ -224,11 +244,11 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
         </Container>
       </div>
 
-      <Container maxWidth=" w-full pb-16 bg-gradient-to-tr from-[#fefefe] to-sky-100/20 relative z-10">
+      <Container maxWidth=" w-full pb-24 bg-gradient-to-tr from-[#fefefe] to-sky-100/20 relative z-10">
       {/* <img src="/static/images/bendy9.svg" className="absolute top-0 -mt-[2.9%] z-10 left-0 w-full gm-added gm-observing gm-observing-cb" loading="lazy"/> */}
       {relatedPosts?.length ? 
                 <div className="z-30 relative max-w-[1320px] mx-auto px-6 md:px-3">
-                  <img src="/static/images/toolbox/squares2.svg" className="w-full h-[120%] absolute object-cover opacity-20"/>
+                  <img src="/static/images/toolbox/squares2.svg" className="w-full h-[128%] absolute object-cover opacity-20"/>
                   <div classsName="flex flex-col px-3 z-30">
                   <h3 className="text-2xl pt-12 mb-6 text-black/90 font-medium font-inter max-w-md">
                     Related tools

diff --git a/styles/toolStyles.css b/styles/toolStyles.css
@@ -6,7 +6,7 @@
   }
   .popup-modal-content ul li {
     margin-top: 0.75rem;
-    color: #4a5568;
+    /* color: #4a5568; */
   }
   .popup-modal-content ol {
     list-style-type: decimal;