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

blog Categories is linked to post page

Browse Source
This commit is contained in:
parsa aghaei 2024-10-07 15:00:49 +03:30
parent 7d0f1dfb6a
commit d167019d76
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/(routes)/blog/components/home/reading-lists/readingList.tsx → src/app/(routes)/blog/components/home/Categories/Categories.tsx
View File

@ -1,11 +1,12 @@
import Image from "next/image";
import Link from "next/link";
export default function ReadingList() {
export default function Categories() {
return (
<div className="mb-5 flex w-full max-w-[95%] flex-wrap gap-10">
<div className="flex w-full items-center justify-between">
<h2 className="text-[36px] font-[700] text-blog-text-default">
ReadingList
Categories
</h2>
<p className="text-[16px] font-[400] text-blog-text-passive">
View all
@ -13,7 +14,10 @@ export default function ReadingList() {
</div>
<div className="flex w-full flex-wrap items-center justify-center gap-5">
<div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
<Link
href={"/blog/categories/UI Design"}
className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-1.jpg"}
@ -25,9 +29,12 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">
UI Design
</h3>
</div>
</Link>
<div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
<Link
href={"/blog/categories/UX design"}
className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-2.jpg"}
@ -39,9 +46,12 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">
UX design
</h3>
</div>
</Link>
<div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
<Link
href={"/blog/categories/SEO"}
className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-3.jpg"}
@ -51,9 +61,12 @@ export default function ReadingList() {
/>
</div>
<h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
</div>
</Link>
<div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
<Link
href={"/blog/categories/Popular"}
className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-4.jpg"}
@ -65,9 +78,12 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">
Popular
</h3>
</div>
</Link>
<div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
<Link
href={"/blog/categories/Essentials"}
className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
>
<div className="h-[200px] w-[200px] overflow-hidden">
<Image
src={"/images/blog/reading-list/readinglist-5.jpg"}
@ -79,7 +95,7 @@ export default function ReadingList() {
<h3 className="text-[24px] font-[600] text-blog-text-default">
Essentials
</h3>
</div>
</Link>
{/* <div className="center-center hidden h-full w-[80px] rounded-md bg-white lg:flex">
<Image

4
src/app/(routes)/blog/page.tsx
View File

@ -1,13 +1,13 @@
import FilteredPosts from "./components/home/filtered-posts/filteredPosts";
import New from "./components/home/new/new";
import Random from "./components/home/random/random";
import ReadingList from "./components/home/reading-lists/readingList";
import Categories from "./components/home/Categories/Categories";
export default async function Blog() {
return (
<div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
<New />
<ReadingList />
<Categories />
<FilteredPosts />
<Random />
</div>