all pages is dynamic now
This commit is contained in:
parsa aghaei
parent
dc11b6c9b3
commit
5a2bb48856
@ -1,28 +1,37 @@
|
||||
import { CategoryDataType, categorySlugPropsType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type propsType = {
|
||||
params: { categorySlug: string };
|
||||
};
|
||||
export default async function SingleCategory({
|
||||
params,
|
||||
}: categorySlugPropsType) {
|
||||
const categoryData: CategoryDataType = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/blog/categories/${params.categorySlug}/posts`,
|
||||
{
|
||||
cache: "no-store",
|
||||
},
|
||||
).then((res) => res.json());
|
||||
|
||||
export default function SingleCategory({ params }: propsType) {
|
||||
return (
|
||||
<div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
|
||||
<div className="flex w-full max-w-[90%] flex-col gap-5">
|
||||
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
||||
{params.categorySlug.replaceAll(/%20|-|_/g, " ")}
|
||||
</h1>
|
||||
<p className="max-w-[650px] text-[18px] font-[600] text-blog-text-default">
|
||||
i do not know how to dynamic this part!
|
||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||
{categoryData.category.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
||||
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
home
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
<Link
|
||||
href={"/blog/home"}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
@ -30,550 +39,66 @@ export default function SingleCategory({ params }: propsType) {
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
categories
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[600] capitalize text-blog-text-default">
|
||||
{params.categorySlug.replaceAll(/%20|-|_/g, " ")}
|
||||
{categoryData.category.name}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="flex w-full flex-wrap justify-center gap-10">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/1.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
{categoryData.posts.map((post) => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
|
||||
>
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={post.featured_image}
|
||||
alt={`${post.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]"
|
||||
>
|
||||
{post.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/${post.category.slug}`}
|
||||
>
|
||||
{post.category.name}
|
||||
</Link>
|
||||
</div> */}
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
|
||||
href={`/blog/posts/${post.slug}`}
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/2.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/3.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/4.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/5.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/6.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/7.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/8.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/9.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/10.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/11.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/12.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/13.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/14.png"}
|
||||
alt={"category 1"}
|
||||
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]">
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="w-full text-start" href={"/blog/posts/UI design"}>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,22 +1,9 @@
|
||||
import { CategoriesListType, CategoryType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type CategoryItemType = {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
posts_count: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
type CategoriesType = { data: CategoryItemType[] };
|
||||
|
||||
export default async function Categories() {
|
||||
const CategoriesData: CategoriesType = await fetch(
|
||||
const CategoriesData: CategoriesListType = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/blog/categories`,
|
||||
{
|
||||
cache: "no-store",
|
||||
@ -39,10 +26,13 @@ export default async function Categories() {
|
||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
||||
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
home
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
<Link
|
||||
href={"/blog/home"}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
@ -54,8 +44,11 @@ export default async function Categories() {
|
||||
</ul>
|
||||
|
||||
<div className="flex w-full flex-wrap justify-center gap-10">
|
||||
{CategoriesData.data.map((category: CategoryItemType) => (
|
||||
<div key={category.id} className="flex w-full items-start gap-5 md:w-[45%]">
|
||||
{CategoriesData.data.map((category: CategoryType) => (
|
||||
<div
|
||||
key={category.id}
|
||||
className="flex w-full items-start gap-5 md:w-[45%]"
|
||||
>
|
||||
<Image
|
||||
className="max-w-[50%] rounded-md"
|
||||
src={category.image}
|
||||
|
||||
@ -1,19 +1,9 @@
|
||||
import { CategoryType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type CategoryItemType = {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
interface CategoriesProps {
|
||||
data: CategoryItemType[];
|
||||
data: CategoryType[];
|
||||
}
|
||||
|
||||
export default function Categories({ data }: CategoriesProps) {
|
||||
|
||||
@ -1,80 +1,12 @@
|
||||
import { PostType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type FilteredItemType = {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
body: string;
|
||||
author: {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
category: {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
tags: [
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
];
|
||||
featured_image: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
interface FilteredPostsProps {
|
||||
data: FilteredItemType[];
|
||||
data: PostType[];
|
||||
}
|
||||
|
||||
export default function FilteredPosts({ data }: FilteredPostsProps) {
|
||||
|
||||
return (
|
||||
<div className="mb-5 flex max-w-[95%] flex-wrap gap-10">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
@ -96,12 +28,15 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
|
||||
key={post.id}
|
||||
className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]"
|
||||
>
|
||||
<h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
|
||||
{post.category.name}
|
||||
</h3>
|
||||
<Link
|
||||
className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]"
|
||||
href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
|
||||
href={`/blog/categories/${post.category.slug}`}
|
||||
className="text-[14px] font-[400] text-blog-text-passive hover:underline sm:text-[16px]"
|
||||
>
|
||||
{post.category.name}
|
||||
</Link>
|
||||
<Link
|
||||
className="text-[15px] font-[600] text-blog-text-default hover:underline sm:text-[18px]"
|
||||
href={`/blog/posts/${post.slug}`}
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
@ -124,21 +59,24 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
|
||||
</p>
|
||||
<Link
|
||||
href={"/"}
|
||||
className="text-[15px] font-[400] capitalize text-white sm:text-[16px]"
|
||||
className="text-[15px] font-[400] capitalize text-white hover:underline sm:text-[16px]"
|
||||
>
|
||||
{data[0].author.name}
|
||||
</Link>
|
||||
<p className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||||
IN
|
||||
</p>
|
||||
<h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||||
<Link
|
||||
href={`/blog/categories/${data[0].category.slug}`}
|
||||
className="text-[15px] font-[400] text-white hover:underline sm:text-[16px]"
|
||||
>
|
||||
{data[0].category.name}
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
|
||||
className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]"
|
||||
href={`/blog/posts/${data[0].slug}`}
|
||||
className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px] hover:underline"
|
||||
>
|
||||
{data[0].title}
|
||||
</Link>
|
||||
|
||||
@ -1,80 +1,12 @@
|
||||
import { PostType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type PostType = {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
body: string;
|
||||
author: {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
category: {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
tags: [
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
];
|
||||
featured_image: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
interface NewProps {
|
||||
data: PostType[];
|
||||
}
|
||||
|
||||
export default function New({ data }: NewProps) {
|
||||
|
||||
return (
|
||||
<div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
|
||||
<div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:h-auto md:w-[60%]">
|
||||
@ -141,7 +73,7 @@ export default function New({ data }: NewProps) {
|
||||
{post.created_at}
|
||||
</p>
|
||||
<Link href={`/blog/posts/${post.slug}`}>
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-default">
|
||||
<h3 className="text-[16px] font-[600] text-blog-text-default hover:underline">
|
||||
{post.title}
|
||||
</h3>
|
||||
</Link>
|
||||
|
||||
@ -1,76 +1,9 @@
|
||||
import { PostType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type RandomItemType = {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
body: string;
|
||||
author: {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
category: {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
tags: [
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
];
|
||||
featured_image: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
interface RandomProps {
|
||||
data: RandomItemType[];
|
||||
data: PostType[];
|
||||
}
|
||||
|
||||
export default function Random({ data }: RandomProps) {
|
||||
|
||||
@ -1,79 +1,10 @@
|
||||
import { FilteredPostsPagepropsType, PostType } from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type FilteredItemType = {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
body: string;
|
||||
author: {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
category: {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
tags: [
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
{
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
},
|
||||
];
|
||||
featured_image: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
type propsType = {
|
||||
params: { filter: string };
|
||||
};
|
||||
|
||||
export default async function FilteredPosts({ params }: propsType) {
|
||||
export default async function FilteredPosts({
|
||||
params,
|
||||
}: FilteredPostsPagepropsType) {
|
||||
let filteredPostApiUrl: string;
|
||||
|
||||
switch (params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()) {
|
||||
@ -89,7 +20,7 @@ export default async function FilteredPosts({ params }: propsType) {
|
||||
filteredPostApiUrl = "";
|
||||
}
|
||||
|
||||
let FilteredPostsData: { data: FilteredItemType[] };
|
||||
let FilteredPostsData: { data: PostType[] };
|
||||
|
||||
if (filteredPostApiUrl !== "") {
|
||||
FilteredPostsData = await fetch(
|
||||
@ -120,9 +51,12 @@ export default async function FilteredPosts({ params }: propsType) {
|
||||
<div className="my-10 flex w-full flex-wrap justify-center gap-5">
|
||||
<ul className="my-10 flex w-full max-w-[90%] flex-wrap gap-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
<Link
|
||||
href={"/blog/home"}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
Home
|
||||
</p>
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
@ -136,7 +70,7 @@ export default async function FilteredPosts({ params }: propsType) {
|
||||
|
||||
<div className="flex w-full max-w-[90%] flex-wrap justify-center gap-10">
|
||||
{FilteredPostsData.data.length > 0 &&
|
||||
FilteredPostsData.data.map((post: FilteredItemType) => (
|
||||
FilteredPostsData.data.map((post: PostType) => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
import {
|
||||
PostSlugPagePostType,
|
||||
PostSlugPagepropsType,
|
||||
PostType,
|
||||
} from "@/app/types/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type propsType = {
|
||||
params: { postSlug: string };
|
||||
};
|
||||
export default async function SinglePost({ params }: PostSlugPagepropsType) {
|
||||
const postData: PostSlugPagePostType = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/blog/posts/${params.postSlug}`,
|
||||
{
|
||||
cache: "no-store",
|
||||
},
|
||||
).then((res) => res.json());
|
||||
|
||||
export default function SinglePost({ params }: propsType) {
|
||||
return (
|
||||
<div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
|
||||
<div className="mt-5 flex w-full max-w-[90%] flex-col gap-5">
|
||||
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
||||
{params.postSlug.replaceAll(/%20|-|_/g, " ")}
|
||||
{postData.post.title}
|
||||
</h1>
|
||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||
People’s quest for creating websites has easily taken us to a new era
|
||||
of site development. Where, with the availability of robust page
|
||||
building tools, creating websites has become a lot more fun
|
||||
(especially for non-developers).
|
||||
{postData.post.excerpt}
|
||||
</p>
|
||||
<div className="flex w-full flex-wrap gap-2">
|
||||
<div className="flex gap-2">
|
||||
@ -25,42 +30,54 @@ export default function SinglePost({ params }: propsType) {
|
||||
</p>
|
||||
<Link
|
||||
href={"/"}
|
||||
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]"
|
||||
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
|
||||
>
|
||||
parsa aghayi
|
||||
{postData.post.author.name}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">IN</p>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default">
|
||||
RESOURCE
|
||||
</h2>
|
||||
<Link
|
||||
href={`/blog/categories/${postData.post.category.slug}`}
|
||||
className="text-[16px] font-[400] text-blog-text-default hover:underline"
|
||||
>
|
||||
{postData.post.category.name}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
||||
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
<Link
|
||||
href={"/blog/home"}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
Home
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
Categories
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
<Link
|
||||
href={"/blog/categories"}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
categories
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
category name
|
||||
</p>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
||||
<Link
|
||||
href={`/blog/categories/${postData.post.category.slug}`}
|
||||
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
{postData.post.category.name}
|
||||
</Link>
|
||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
@ -84,8 +101,8 @@ export default function SinglePost({ params }: propsType) {
|
||||
<div className="relative flex w-[95%] flex-wrap gap-5">
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/blog/posts/post/1.png"}
|
||||
alt={"post image 1"}
|
||||
src={postData.post.featured_image}
|
||||
alt={`${postData.post.title} post featured image`}
|
||||
/>
|
||||
<p className="text-[20px] font-[400] text-blog-text-default">
|
||||
People’s quest for creating websites has easily taken us to a new
|
||||
@ -207,8 +224,8 @@ export default function SinglePost({ params }: propsType) {
|
||||
height={35}
|
||||
alt="socials-vertical icons"
|
||||
/>
|
||||
<p className="whitespace-nowrap text-[14px] font-[600] text-blog-text-default">
|
||||
12 K
|
||||
<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">
|
||||
@ -218,114 +235,80 @@ export default function SinglePost({ params }: propsType) {
|
||||
height={35}
|
||||
alt="socials-vertical icons"
|
||||
/>
|
||||
<p className="whitespace-nowrap text-[14px] font-[600] text-blog-text-default">
|
||||
25 K
|
||||
<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 flex w-full flex-wrap gap-10">
|
||||
<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
|
||||
{/* <Link
|
||||
href={"#"}
|
||||
className="text-[22px] font-[600] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
more
|
||||
</Link>
|
||||
</Link> */}
|
||||
</div>
|
||||
<div className="flex w-full flex-wrap justify-between gap-5">
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/1.png"}
|
||||
alt={"category 1"}
|
||||
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]"
|
||||
>
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/2.png"}
|
||||
alt={"post 2"}
|
||||
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]"
|
||||
>
|
||||
parsa aghayi
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
{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>
|
||||
|
||||
@ -1,3 +1,81 @@
|
||||
export type {
|
||||
// تعریف نوع Author
|
||||
export type AuthorType = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
}
|
||||
// تعریف نوع Category
|
||||
export type CategoryType = {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
short_description: string;
|
||||
image: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type CategoriesListType = { data: CategoryType[] };
|
||||
|
||||
// تعریف نوع Tag
|
||||
export type TagType = {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
// تعریف نوع PostItemType با استفاده از انواع جداگانه
|
||||
export type PostType = {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
body: string;
|
||||
author: AuthorType;
|
||||
category: CategoryType;
|
||||
tags: TagType[]; // اصلاح شده به آرایه از TagType
|
||||
featured_image: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type categorySlugPropsType = {
|
||||
params: { categorySlug: string };
|
||||
};
|
||||
|
||||
export type PaginationType = {
|
||||
total: number;
|
||||
per_page: number;
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
from: number;
|
||||
to: number;
|
||||
};
|
||||
|
||||
export type CategoryDataType = {
|
||||
category: CategoryType;
|
||||
posts: PostType[];
|
||||
pagination: PaginationType;
|
||||
};
|
||||
|
||||
export type FilteredPostsPagepropsType = {
|
||||
params: { filter: string };
|
||||
};
|
||||
|
||||
export type PostSlugPagepropsType = {
|
||||
params: { postSlug: string };
|
||||
};
|
||||
|
||||
export type PostSlugPagePostType = {
|
||||
post: PostType;
|
||||
related_posts: PostType[];
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user