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

blog single category page created

Browse Source
This commit is contained in:
parsa aghaei 2024-10-08 16:28:35 +03:30
parent 74eea9fd99
commit 7dddd92ffa
3 changed files with 600 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

597
src/app/(routes)/blog/categories/[categorySlug]/page.tsx Normal file
View File

@ -0,0 +1,597 @@
import Image from "next/image";
import Link from "next/link";
type propsType = {
params: { categorySlug: string };
};
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}
</h1>
<p className="max-w-[650px] text-[18px] font-[600] text-blog-text-default">
i do not know how to dynamic this part!
</p>
</div>
<div className="my-10 flex w-full flex-wrap justify-center gap-5">
<ul className="my-10 flex w-full max-w-[90%]">
<li className="text-[12px] font-[400] capitalize text-blog-text-passive">
Home
</li>
<span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
-
</span>
<li className="text-[12px] font-[600] capitalize text-blog-text-default">
{params.categorySlug}
</li>
</ul>
<div className="flex w-full max-w-[90%] 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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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={"#"}>
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
TOMAS LAURINAVICIUS
</h2>
</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>
);
}

7
src/app/(routes)/blog/categories/[slug]/page.tsx
View File

@ -1,7 +0,0 @@
type propsType = {
params: { slug: string };
};
export default function SingleCategory({ params }: propsType) {
return <div>{params.slug}</div>;
}

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

@ -2,7 +2,7 @@ import Image from "next/image";
import Link from "next/link";
type propsType = {
params: { slug: string };
params: { postSlug: string };
};
export default function SinglePost({ params }: propsType) {
@ -10,7 +10,7 @@ export default function SinglePost({ params }: propsType) {
<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.slug.replaceAll(/%20|-|_/g, " ")}
{params.postSlug.replaceAll(/%20|-|_/g, " ")}
</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
@ -56,7 +56,7 @@ export default function SinglePost({ params }: propsType) {
-
</span>
<li className="text-[12px] font-[600] capitalize text-blog-text-default">
{params.slug.replaceAll(/%20|-|_/g, " ")}
{params.postSlug.replaceAll(/%20|-|_/g, " ")}
</li>
</ul>