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 Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
type propsType = {
|
export default async function SingleCategory({
|
||||||
params: { categorySlug: string };
|
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 (
|
return (
|
||||||
<div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
|
<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">
|
<div className="flex w-full max-w-[90%] flex-col gap-5">
|
||||||
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
||||||
{params.categorySlug.replaceAll(/%20|-|_/g, " ")}
|
{params.categorySlug.replaceAll(/%20|-|_/g, " ")}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="max-w-[650px] text-[18px] font-[600] text-blog-text-default">
|
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||||
i do not know how to dynamic this part!
|
{categoryData.category.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
<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">
|
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
<Link
|
||||||
home
|
href={"/blog/home"}
|
||||||
</p>
|
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||||
-
|
-
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
@ -30,550 +39,66 @@ export default function SingleCategory({ params }: propsType) {
|
|||||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||||
categories
|
categories
|
||||||
</p>
|
</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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<p className="text-[12px] font-[600] capitalize text-blog-text-default">
|
<p className="text-[12px] font-[600] capitalize text-blog-text-default">
|
||||||
{params.categorySlug.replaceAll(/%20|-|_/g, " ")}
|
{categoryData.category.name}
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className="flex w-full flex-wrap justify-center gap-10">
|
<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%]">
|
{categoryData.posts.map((post) => (
|
||||||
<Image
|
<div
|
||||||
className="mb-3 rounded-md"
|
key={post.id}
|
||||||
src={"/images/blog/posts/1.png"}
|
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
|
||||||
alt={"category 1"}
|
>
|
||||||
loading="lazy"
|
<Image
|
||||||
width={600}
|
className="mb-3 rounded-md"
|
||||||
height={500}
|
src={post.featured_image}
|
||||||
/>
|
alt={`${post.title} post featured image`}
|
||||||
<div className="mb-2 flex w-full flex-wrap gap-2">
|
loading="lazy"
|
||||||
<div className="flex gap-2">
|
width={600}
|
||||||
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
height={500}
|
||||||
BY
|
/>
|
||||||
</p>
|
<div className="mb-2 flex w-full flex-wrap gap-2">
|
||||||
<Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]">
|
<div className="flex gap-2">
|
||||||
parsa aghayi
|
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
||||||
</Link>
|
BY
|
||||||
</div>
|
</p>
|
||||||
<div className="whit flex gap-2">
|
<Link
|
||||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
href={"/"}
|
||||||
IN
|
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
|
||||||
</p>
|
>
|
||||||
<Link href={"#"}>
|
{post.author.name}
|
||||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
</Link>
|
||||||
RESOURCE
|
</div>
|
||||||
</h2>
|
{/* <div className="whit flex gap-2">
|
||||||
</Link>
|
<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>
|
</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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,22 +1,9 @@
|
|||||||
|
import { CategoriesListType, CategoryType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
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() {
|
export default async function Categories() {
|
||||||
const CategoriesData: CategoriesType = await fetch(
|
const CategoriesData: CategoriesListType = await fetch(
|
||||||
`${process.env.NEXT_PUBLIC_API_URL}/blog/categories`,
|
`${process.env.NEXT_PUBLIC_API_URL}/blog/categories`,
|
||||||
{
|
{
|
||||||
cache: "no-store",
|
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">
|
<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">
|
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
<Link
|
||||||
home
|
href={"/blog/home"}
|
||||||
</p>
|
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||||
-
|
-
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
@ -54,8 +44,11 @@ export default async function Categories() {
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className="flex w-full flex-wrap justify-center gap-10">
|
<div className="flex w-full flex-wrap justify-center gap-10">
|
||||||
{CategoriesData.data.map((category: CategoryItemType) => (
|
{CategoriesData.data.map((category: CategoryType) => (
|
||||||
<div key={category.id} className="flex w-full items-start gap-5 md:w-[45%]">
|
<div
|
||||||
|
key={category.id}
|
||||||
|
className="flex w-full items-start gap-5 md:w-[45%]"
|
||||||
|
>
|
||||||
<Image
|
<Image
|
||||||
className="max-w-[50%] rounded-md"
|
className="max-w-[50%] rounded-md"
|
||||||
src={category.image}
|
src={category.image}
|
||||||
|
|||||||
@ -1,19 +1,9 @@
|
|||||||
|
import { CategoryType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
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 {
|
interface CategoriesProps {
|
||||||
data: CategoryItemType[];
|
data: CategoryType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Categories({ data }: CategoriesProps) {
|
export default function Categories({ data }: CategoriesProps) {
|
||||||
|
|||||||
@ -1,80 +1,12 @@
|
|||||||
|
import { PostType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
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 {
|
interface FilteredPostsProps {
|
||||||
data: FilteredItemType[];
|
data: PostType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FilteredPosts({ data }: FilteredPostsProps) {
|
export default function FilteredPosts({ data }: FilteredPostsProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mb-5 flex max-w-[95%] flex-wrap gap-10">
|
<div className="mb-5 flex max-w-[95%] flex-wrap gap-10">
|
||||||
<div className="flex w-full items-center justify-between">
|
<div className="flex w-full items-center justify-between">
|
||||||
@ -96,12 +28,15 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
|
|||||||
key={post.id}
|
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%]"
|
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
|
<Link
|
||||||
className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]"
|
href={`/blog/categories/${post.category.slug}`}
|
||||||
href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
|
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}
|
{post.title}
|
||||||
</Link>
|
</Link>
|
||||||
@ -124,21 +59,24 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
|
|||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href={"/"}
|
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}
|
{data[0].author.name}
|
||||||
</Link>
|
</Link>
|
||||||
<p className="text-[15px] font-[400] text-white sm:text-[16px]">
|
<p className="text-[15px] font-[400] text-white sm:text-[16px]">
|
||||||
IN
|
IN
|
||||||
</p>
|
</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}
|
{data[0].category.name}
|
||||||
</h2>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
|
href={`/blog/posts/${data[0].slug}`}
|
||||||
className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]"
|
className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px] hover:underline"
|
||||||
>
|
>
|
||||||
{data[0].title}
|
{data[0].title}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -1,80 +1,12 @@
|
|||||||
|
import { PostType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
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 {
|
interface NewProps {
|
||||||
data: PostType[];
|
data: PostType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function New({ data }: NewProps) {
|
export default function New({ data }: NewProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
|
<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%]">
|
<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}
|
{post.created_at}
|
||||||
</p>
|
</p>
|
||||||
<Link href={`/blog/posts/${post.slug}`}>
|
<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}
|
{post.title}
|
||||||
</h3>
|
</h3>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -1,76 +1,9 @@
|
|||||||
|
import { PostType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
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 {
|
interface RandomProps {
|
||||||
data: RandomItemType[];
|
data: PostType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Random({ data }: RandomProps) {
|
export default function Random({ data }: RandomProps) {
|
||||||
|
|||||||
@ -1,79 +1,10 @@
|
|||||||
|
import { FilteredPostsPagepropsType, PostType } from "@/app/types/types";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
type FilteredItemType = {
|
export default async function FilteredPosts({
|
||||||
id: number;
|
params,
|
||||||
title: string;
|
}: FilteredPostsPagepropsType) {
|
||||||
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) {
|
|
||||||
let filteredPostApiUrl: string;
|
let filteredPostApiUrl: string;
|
||||||
|
|
||||||
switch (params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()) {
|
switch (params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()) {
|
||||||
@ -89,7 +20,7 @@ export default async function FilteredPosts({ params }: propsType) {
|
|||||||
filteredPostApiUrl = "";
|
filteredPostApiUrl = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
let FilteredPostsData: { data: FilteredItemType[] };
|
let FilteredPostsData: { data: PostType[] };
|
||||||
|
|
||||||
if (filteredPostApiUrl !== "") {
|
if (filteredPostApiUrl !== "") {
|
||||||
FilteredPostsData = await fetch(
|
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">
|
<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">
|
<ul className="my-10 flex w-full max-w-[90%] flex-wrap gap-2">
|
||||||
<li className="flex items-center 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
|
Home
|
||||||
</p>
|
</Link>
|
||||||
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||||
-
|
-
|
||||||
</span>
|
</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">
|
<div className="flex w-full max-w-[90%] flex-wrap justify-center gap-10">
|
||||||
{FilteredPostsData.data.length > 0 &&
|
{FilteredPostsData.data.length > 0 &&
|
||||||
FilteredPostsData.data.map((post: FilteredItemType) => (
|
FilteredPostsData.data.map((post: PostType) => (
|
||||||
<div
|
<div
|
||||||
key={post.id}
|
key={post.id}
|
||||||
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
|
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 Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
type propsType = {
|
export default async function SinglePost({ params }: PostSlugPagepropsType) {
|
||||||
params: { postSlug: string };
|
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 (
|
return (
|
||||||
<div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
|
<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">
|
<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">
|
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
||||||
{params.postSlug.replaceAll(/%20|-|_/g, " ")}
|
{postData.post.title}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||||
People’s quest for creating websites has easily taken us to a new era
|
{postData.post.excerpt}
|
||||||
of site development. Where, with the availability of robust page
|
|
||||||
building tools, creating websites has become a lot more fun
|
|
||||||
(especially for non-developers).
|
|
||||||
</p>
|
</p>
|
||||||
<div className="flex w-full flex-wrap gap-2">
|
<div className="flex w-full flex-wrap gap-2">
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
@ -25,42 +30,54 @@ export default function SinglePost({ params }: propsType) {
|
|||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
href={"/"}
|
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>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="whit flex gap-2">
|
<div className="whit flex gap-2">
|
||||||
<p className="text-[16px] font-[600] text-blog-text-passive">IN</p>
|
<p className="text-[16px] font-[600] text-blog-text-passive">IN</p>
|
||||||
<h2 className="text-[16px] font-[400] text-blog-text-default">
|
<Link
|
||||||
RESOURCE
|
href={`/blog/categories/${postData.post.category.slug}`}
|
||||||
</h2>
|
className="text-[16px] font-[400] text-blog-text-default hover:underline"
|
||||||
|
>
|
||||||
|
{postData.post.category.name}
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
<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">
|
<ul className="my-10 flex w-full flex-wrap gap-2">
|
||||||
<li className="flex items-center 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
|
Home
|
||||||
</p>
|
</Link>
|
||||||
<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>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
<Link
|
||||||
Categories
|
href={"/blog/categories"}
|
||||||
</p>
|
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
>
|
||||||
|
categories
|
||||||
|
</Link>
|
||||||
|
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||||
-
|
-
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center gap-2">
|
<li className="flex items-center gap-2">
|
||||||
<p className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
<Link
|
||||||
category name
|
href={`/blog/categories/${postData.post.category.slug}`}
|
||||||
</p>
|
className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
|
||||||
<span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
|
>
|
||||||
|
{postData.post.category.name}
|
||||||
|
</Link>
|
||||||
|
<span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
|
||||||
-
|
-
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
@ -84,8 +101,8 @@ export default function SinglePost({ params }: propsType) {
|
|||||||
<div className="relative flex w-[95%] flex-wrap gap-5">
|
<div className="relative flex w-[95%] flex-wrap gap-5">
|
||||||
<img
|
<img
|
||||||
className="w-full"
|
className="w-full"
|
||||||
src={"/images/blog/posts/post/1.png"}
|
src={postData.post.featured_image}
|
||||||
alt={"post image 1"}
|
alt={`${postData.post.title} post featured image`}
|
||||||
/>
|
/>
|
||||||
<p className="text-[20px] font-[400] text-blog-text-default">
|
<p className="text-[20px] font-[400] text-blog-text-default">
|
||||||
People’s quest for creating websites has easily taken us to a new
|
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}
|
height={35}
|
||||||
alt="socials-vertical icons"
|
alt="socials-vertical icons"
|
||||||
/>
|
/>
|
||||||
<p className="whitespace-nowrap text-[14px] font-[600] text-blog-text-default">
|
<p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
|
||||||
12 K
|
{postData.post.likes}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex cursor-pointer flex-col gap-1">
|
<div className="flex cursor-pointer flex-col gap-1">
|
||||||
@ -218,114 +235,80 @@ export default function SinglePost({ params }: propsType) {
|
|||||||
height={35}
|
height={35}
|
||||||
alt="socials-vertical icons"
|
alt="socials-vertical icons"
|
||||||
/>
|
/>
|
||||||
<p className="whitespace-nowrap text-[14px] font-[600] text-blog-text-default">
|
<p className="whitespace-nowrap text-center text-[14px] font-[600] text-blog-text-default">
|
||||||
25 K
|
{postData.post.views}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<div className="flex w-full items-center justify-between">
|
||||||
<p className="text-[22px] font-[600] text-blog-text-default">
|
<p className="text-[22px] font-[600] text-blog-text-default">
|
||||||
You might also like...
|
You might also like...
|
||||||
</p>
|
</p>
|
||||||
<Link
|
{/* <Link
|
||||||
href={"#"}
|
href={"#"}
|
||||||
className="text-[22px] font-[600] capitalize text-blog-text-passive hover:underline"
|
className="text-[22px] font-[600] capitalize text-blog-text-passive hover:underline"
|
||||||
>
|
>
|
||||||
more
|
more
|
||||||
</Link>
|
</Link> */}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full flex-wrap justify-between gap-5">
|
<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%]">
|
{postData.related_posts.map(
|
||||||
<Image
|
(relatedPost: PostType, key: number) => {
|
||||||
className="mb-3 rounded-md"
|
if (key < 2) {
|
||||||
src={"/images/blog/posts/1.png"}
|
return (
|
||||||
alt={"category 1"}
|
<div
|
||||||
loading="lazy"
|
key={relatedPost.id}
|
||||||
width={600}
|
className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
|
||||||
height={500}
|
>
|
||||||
/>
|
<Image
|
||||||
<div className="mb-2 flex w-full flex-wrap gap-2">
|
className="mb-3 rounded-md"
|
||||||
<div className="flex gap-2">
|
src={relatedPost.featured_image}
|
||||||
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
alt={`${relatedPost.title} post featured image`}
|
||||||
BY
|
loading="lazy"
|
||||||
</p>
|
width={600}
|
||||||
<Link
|
height={500}
|
||||||
href={"/"}
|
/>
|
||||||
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
|
<div className="mb-2 flex w-full flex-wrap gap-2">
|
||||||
>
|
<div className="flex gap-2">
|
||||||
parsa aghayi
|
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
||||||
</Link>
|
BY
|
||||||
</div>
|
</p>
|
||||||
<div className="whit flex gap-2">
|
<Link
|
||||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
href={"/"}
|
||||||
IN
|
className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
|
||||||
</p>
|
>
|
||||||
<Link href={"#"}>
|
{relatedPost.author.name}
|
||||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
</Link>
|
||||||
RESOURCE
|
</div>
|
||||||
</h2>
|
<div className="whit flex gap-2">
|
||||||
</Link>
|
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||||
</div>
|
IN
|
||||||
</div>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
className="w-full text-start"
|
className="text-[16px] font-[400] text-blog-text-default hover:underline"
|
||||||
href={"/blog/posts/UI design"}
|
href={`/blog/categories/${relatedPost.category.slug}`}
|
||||||
>
|
>
|
||||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
{relatedPost.category.name}
|
||||||
UI design
|
</Link>
|
||||||
</h3>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
<Link
|
||||||
Every website is a user interface. Learn to build yours right.
|
href={`/blog/posts/${relatedPost.slug}`}
|
||||||
</p>
|
className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
|
||||||
</div>
|
>
|
||||||
<div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
|
{relatedPost.title}
|
||||||
<Image
|
</Link>
|
||||||
className="mb-3 rounded-md"
|
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||||
src={"/images/blog/posts/2.png"}
|
{relatedPost.excerpt}
|
||||||
alt={"post 2"}
|
</p>
|
||||||
loading="lazy"
|
</div>
|
||||||
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>
|
</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