parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

postSlog likes/view and related post restored

Browse Source
This commit is contained in:
parsa aghaei 2024-10-20 10:26:34 +03:30
parent 6d83f43310
commit a6732a2b72
1 changed files with 148 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/app/(routes)/blog/posts/[postSlug]/page.tsx
View File

@ -1,4 +1,8 @@
import { PostSlugPagePostType, PostSlugPagepropsType } from "@/app/types/types";
import {
PostSlugPagePostType,
PostSlugPagepropsType,
PostType,
} from "@/app/types/types";
import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
@ -109,7 +113,7 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
</li>
</ul>
<div className="relative flex w-full items-start justify-center gap-5">
<div className="relative flex w-full items-start justify-center gap-3 sm:gap-4 md:gap-5">
<div className="sticky top-[150px] flex flex-col items-start">
<Image
src={"/images/blog/icons/socials-vertical.svg"}
@ -187,6 +191,148 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
comes with an add-on to display client testimonials.
</li>
</ul>
<div className="my-10 flex w-full justify-between">
<div className="w-[48%]">
<img
className="w-full"
src={"/images/blog/posts/post/3.png"}
alt={"post image 3"}
/>
</div>
<div className="w-[48%]">
<img
className="w-full"
src={"/images/blog/posts/post/4.png"}
alt={"post image 4"}
/>
</div>
</div>
<p className="my-10 text-center text-[24px] font-[400] text-blog-purple">
“ WP Page Builder offers a lot of ready-to-use design blocks to
make your site development process a lot faster and easier “
</p>
<div className="flex w-full justify-center">
<div className="flex flex-col items-center">
<Image
src={"/images/blog/users/1.png"}
alt={"user 1 image"}
width={80}
height={80}
className="mb-2 rounded-full"
/>
<Link
href={"/"}
className="text-center text-[18px] font-[400] capitalize text-blog-text-default hover:underline"
>
parsa aghayi
</Link>
<p className="text-[16px] font-[400] text-blog-text-default">
Follow me
<Link
href={"/"}
className="ms-1 text-[16px] font-[400] text-blog-blue"
>
@parsaaghayi
</Link>
.
</p>
</div>
</div>
</div>
<div className="sticky top-[150px] flex flex-col items-end gap-5">
<div className="flex cursor-pointer flex-col gap-1">
<Image
src={"/images/blog/icons/like.svg"}
width={35}
height={35}
alt="socials-vertical icons"
/>
<p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
{postData.post.likes}
</p>
</div>
<div className="flex cursor-pointer flex-col gap-1">
<Image
src={"/images/blog/icons/eye.svg"}
width={35}
height={35}
alt="socials-vertical icons"
/>
<p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
{postData.post.views}
</p>
</div>
</div>
</div>
<div className="my-10 mt-20 flex w-full flex-wrap gap-10">
<div className="flex w-full items-center justify-between">
<p className="text-[22px] font-[600] text-blog-text-default">
You might also like...
</p>
{/* <Link
href={"#"}
className="text-[22px] font-[600] capitalize text-blog-text-passive hover:underline"
>
more
</Link> */}
</div>
<div className="flex w-full flex-wrap justify-between gap-5">
{postData.related_posts.map(
(relatedPost: PostType, key: number) => {
if (key < 2) {
return (
<div
key={relatedPost.id}
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
>
<Image
className="mb-3 rounded-md"
src={relatedPost.featured_image}
alt={`${relatedPost.title} post featured image`}
loading="lazy"
width={600}
height={500}
/>
<div className="mb-2 flex w-full flex-wrap gap-2">
<div className="flex gap-2">
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
BY
</p>
<Link
href={"/"}
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
>
{relatedPost.author.name}
</Link>
</div>
<div className="whit flex gap-2">
<p className="text-[16px] font-[600] text-blog-text-passive">
IN
</p>
<Link
className="text-[16px] font-[400] text-blog-text-default hover:underline"
href={`/blog/categories/${relatedPost.category.slug}`}
>
{relatedPost.category.name}
</Link>
</div>
</div>
<Link
href={`/blog/posts/${relatedPost.slug}`}
className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
>
{relatedPost.title}
</Link>
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
{relatedPost.excerpt}
</p>
</div>
);
}
},
)}
</div>
</div>
</div>