Skip to content

Commit

Permalink
post page layout to add like button
Browse files Browse the repository at this point in the history
  • Loading branch information
GraemeFulton committed Jun 29, 2024
1 parent b514ec2 commit 1982728
Show file tree
Hide file tree
Showing 6 changed files with 218 additions and 60 deletions.
138 changes: 138 additions & 0 deletions components/AuthorSidebar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import AuthorCard from "@/components/toolbox/AuthorCard";
import ToolBackgroundCard from "@/components/v4/card/ToolBackgroundCard";
import ToolIconCard from "@/components/v4/card/ToolIconCard";
import SocialShare from "@/components/SocialShare";
import Link from "next/link";

const AuthorSidebar = ({post,date,navSponsor, relatedPosts, tags, authorAvatar}) =>{

return(
<div className="p-1 pt-0.5 rounded-2xl h-fit border-gray-300/60">
{post.attributes?.creators?.data?.length > 0 ? (
<div className="order-1 p-4 mb-4 rounded-2xl bg-[#f4f4f4]/60">
<h3 className="text-sm tracking-tight text-gray-500 ">
{post.attributes?.creators?.data?.length > 1
? `Creators`
: "Creator"}
</h3>
{post.attributes?.creators?.data?.map((creator, index) => {
return (
<AuthorCard
creator={true}
key={index}
title={post?.attributes?.creator ? "Curator" : null}
author={creator}
avatar={creator}
authorAvatar={
creator?.attributes?.avatar?.data?.attributes?.url
? creator?.attributes.avatar.data.attributes.url
: creator?.attributes?.legacyAvatar
? creator?.attributes.legacyAvatar
: "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"
}
/>
);
})}
</div>
) : null}

{post?.attributes?.author &&
!post?.attributes?.creators?.data?.length && (
<div className="p-4 rounded-2xl bg-[#f4f4f4]/60">
<AuthorCard
authorAvatar={authorAvatar}
title={post?.attributes?.creator ? "Curator" : null}
author={post.attributes.author}
avatar={post.attributes?.author}
/>
</div>
)}
{/* <div className="h-[1px] pb-2 -mt-3 px-3">
<div className="bg-gray-100 h-[1px]"></div>
</div> */}
<div className="flex flex-col gap-4 mt-4 p-4 rounded-2xl bg-[#f4f4f4]/60">
<div className="text-gray-500">
<h3 className="text-sm tracking-tight ">Published</h3>
<div className="text-base tracking-tight font-medium text-gray-500">
{date}
</div>
</div>
{post?.attributes?.author &&
post?.attributes?.creators?.data?.length &&
post?.attributes?.author?.id !=
post?.attributes?.creators?.data[0]?.id ? (
<AuthorCard
size={"small"}
authorAvatar={authorAvatar}
title={post?.attributes?.creator ? "Curator" : null}
author={post.attributes.author}
avatar={post.attributes?.author}
/>
) : null}

<div className="text-gray-500 mt-1">
<h3 className="text-sm tracking-tight ">Tags</h3>
{tags?.map((tag, index) => {
return (
<Link href={`/toolbox/${tag.attributes.slug}/page/1/`}>
<div
key={index}
className="text-gray-800 tracking-tight font-medium"
>
{tag.attributes.name}
</div>
</Link>
);
})}
</div>
<div className="mt-2">
<SocialShare
size={28}
title={post.attributes.title}
slug={post.attributes.slug}
/>
</div>
</div>

{/* <div className="mt-4">
<ToolBackgroundCard
showAdTag={true}
height={"h-[220px] md:h-[310px] xl:h-[190px]"}
withBackground={true}
post={navSponsor}
/>
</div> */}

{/* <div className="flex flex-col gap-4 mt-4 rounded-2xl bg-[#f4f4f4]/60">
<div className="relative rounded-2xl pb-3">
<h1
tabIndex={0}
className="text-sm mb-3 text-gray-500 tracking-tight px-3 pt-3"
>
Related tools
</h1>
<div className="flex flex-col pt-1 grid grid-cols-6 gap-6">
{relatedPosts?.map((tool, index) => {
return (
<div
key={index}
className="flex flex-col px-3 col-span-6 sm:col-span-3 lg:col-span-6 xl:col-span-6"
>
<div className="">
<ToolIconCard
withBackground={false}
tool={tool}
/>
</div>
</div>
);
})}
</div>
</div>
</div> */}
</div>
)
}

export default AuthorSidebar;
8 changes: 4 additions & 4 deletions components/LikeButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -250,12 +250,12 @@ const LikeButton = ({ post, user }) => {

return (
<div className="flex flex-col gap-2 mt-4">
<p
className={`${likeCount?.total > 0 ? "h-6" : "opacity-0 h-0"} text-gray-600 tracking-tight font-semibold text-center transition transition-all duration-400 cursor-default`}
<div className="rounded-full h-fit w-fit p-2.5 flex flex-col gap-2 bg-gray-100/90">
<div
className={`${likeCount?.total > 0 ? "h-6 my-2" : "opacity-0 h-0"} text-gray-600 tracking-tight font-semibold text-center transition transition-all duration-400 cursor-default`}
>
<span className="mr-[2px]">❤️</span> {likeCount?.total}
</p>
<div className="rounded-full h-fit w-fit p-2.5 flex flex-col gap-2 bg-gray-100/90">
</div>
<button
disabled={creatingLike}
onClick={() => handleReaction("like")}
Expand Down
2 changes: 1 addition & 1 deletion components/post-header.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function PostHeader({
<div className="container rounded-xl w-full max-w-6xl mx-auto bg-white bg-cover mt-10 h-[280px] md:h-[400px]" style={{backgroundImage:`linear-gradient(to bottom, rgba(255,255,255,0.15),rgba(0,0,0,0.2), rgba(0,0,0,0.34)),url('${coverImage}')`}}></div>
</>
}
<div className="w-[1020px] max-w-full mx-auto mb-6">
<div className="w-[1400px] max-w-full mx-auto mb-10">
{template!==3 && <PostTitle>{title}</PostTitle>}

{/* <div className="w-full flex justify-center">
Expand Down
2 changes: 1 addition & 1 deletion components/post-title.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default function PostTitle({ children }) {
return (
<h1 className="text-6xl tracking-tight md:text-[72px] w-full leading-tight max-w-[46rem] text-black/90 font-medium text-left drop-shadow-sm">
<h1 className="text-6xl tracking-tight md:text-[72px] w-full leading-tight md:max-w-[90%] text-black/90 font-medium text-left drop-shadow-sm">
{children}
</h1>
);
Expand Down
2 changes: 1 addition & 1 deletion components/toolbox/AuthorCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default function AuthorCard({
{username}
</p>
{size!=='small'?<p tabIndex={0} className="text-base text-gray-500">
{attributes?.jobrole?attributes.jobrole:creator?'Creator':'Editor'}
{attributes?.jobrole?attributes.jobrole:creator?'Creator':'Author'}
</p>:null}
{title ? (
<h1 tabIndex={0} className="text-base mt-2">
Expand Down
Loading

0 comments on commit 1982728

Please sign in to comment.