diff --git a/src/app/(routes)/blog/categories/[categorySlug]/page.tsx b/src/app/(routes)/blog/categories/[categorySlug]/page.tsx index 984a99f..d34f705 100644 --- a/src/app/(routes)/blog/categories/[categorySlug]/page.tsx +++ b/src/app/(routes)/blog/categories/[categorySlug]/page.tsx @@ -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 (

{params.categorySlug.replaceAll(/%20|-|_/g, " ")}

-

- i do not know how to dynamic this part! +

+ {categoryData.category.description}

-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- + {categoryData.posts.map((post) => ( +
+ {`${post.title} +
+
+

+ BY +

+ + {post.author.name} + +
+ {/*
+

+ IN +

+ + {post.category.name} + +
*/}
+ + {post.title} + +

+ {post.excerpt} +

- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
-
- {"category -
-
-

- BY -

- - parsa aghayi - -
-
-

- IN -

- -

- RESOURCE -

- -
-
- -

- UI design -

- -

- Every website is a user interface. Learn to build yours right. -

-
+ ))}
diff --git a/src/app/(routes)/blog/categories/page.tsx b/src/app/(routes)/blog/categories/page.tsx index 6442dc8..aef9bd8 100644 --- a/src/app/(routes)/blog/categories/page.tsx +++ b/src/app/(routes)/blog/categories/page.tsx @@ -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() {
  • -

    - home -

    - + + Home + + -
    • @@ -54,8 +44,11 @@ export default async function Categories() {
- {CategoriesData.data.map((category: CategoryItemType) => ( -
+ {CategoriesData.data.map((category: CategoryType) => ( +
@@ -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%]" > -

- {post.category.name} -

+ {post.category.name} + + {post.title} @@ -124,21 +59,24 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {

{data[0].author.name}

IN

-

+ {data[0].category.name} -

+
{data[0].title} diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx index c63a736..b1ecc2e 100644 --- a/src/app/(routes)/blog/components/home/new/new.tsx +++ b/src/app/(routes)/blog/components/home/new/new.tsx @@ -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 (
@@ -141,7 +73,7 @@ export default function New({ data }: NewProps) { {post.created_at}

-

+

{post.title}

diff --git a/src/app/(routes)/blog/components/home/random/random.tsx b/src/app/(routes)/blog/components/home/random/random.tsx index 9ea4b67..a9d4452 100644 --- a/src/app/(routes)/blog/components/home/random/random.tsx +++ b/src/app/(routes)/blog/components/home/random/random.tsx @@ -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) { diff --git a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx index e0ef11c..4abbd1f 100644 --- a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx +++ b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx @@ -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) {
  • -

    + Home -

    + - @@ -136,7 +70,7 @@ export default async function FilteredPosts({ params }: propsType) {
    {FilteredPostsData.data.length > 0 && - FilteredPostsData.data.map((post: FilteredItemType) => ( + FilteredPostsData.data.map((post: PostType) => (
    res.json()); -export default function SinglePost({ params }: propsType) { return (

    - {params.postSlug.replaceAll(/%20|-|_/g, " ")} + {postData.post.title}

    - 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}

    @@ -25,42 +30,54 @@ export default function SinglePost({ params }: propsType) {

    - parsa aghayi + {postData.post.author.name}

    IN

    -

    - RESOURCE -

    + + {postData.post.category.name} +
    • -

      + Home -

      - + + -
    • -

      - Categories -

      - + + categories + + -
    • -

      - category name -

      - + + {postData.post.category.name} + + -
      • @@ -84,8 +101,8 @@ export default function SinglePost({ params }: propsType) {
      {"post

      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" /> -

      - 12 K +

      + {postData.post.likes}

      @@ -218,114 +235,80 @@ export default function SinglePost({ params }: propsType) { height={35} alt="socials-vertical icons" /> -

      - 25 K +

      + {postData.post.views}

    -
    +

    You might also like...

    - more - + */}
    -
    - {"category -
    -
    -

    - BY -

    - - parsa aghayi - -
    -
    -

    - IN -

    - -

    - RESOURCE -

    - -
    -
    - -

    - UI design -

    - -

    - Every website is a user interface. Learn to build yours right. -

    -
    -
    - {"post -
    -
    -

    - BY -

    - - parsa aghayi - -
    -
    -

    - IN -

    - -

    - RESOURCE -

    - -
    -
    - -

    - UI design -

    - -

    - Every website is a user interface. Learn to build yours right. -

    -
    + {postData.related_posts.map( + (relatedPost: PostType, key: number) => { + if (key < 2) { + return ( +
    + {`${relatedPost.title} +
    +
    +

    + BY +

    + + {relatedPost.author.name} + +
    +
    +

    + IN +

    + + {relatedPost.category.name} + +
    +
    + + {relatedPost.title} + +

    + {relatedPost.excerpt} +

    +
    + ); + } + }, + )}
    diff --git a/src/app/types/types.ts b/src/app/types/types.ts index a32922e..466059f 100644 --- a/src/app/types/types.ts +++ b/src/app/types/types.ts @@ -1,3 +1,81 @@ -export type { +// تعریف نوع Author +export type AuthorType = { + id: number; + name: string; + email: string; + created_at: string; + updated_at: string; +}; -} \ No newline at end of file +// تعریف نوع 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[]; +};