filteredPosts page internationalization added

2024-10-21 11:37:38 +03:30 · 2024-10-21 11:37:38 +03:30 · c11764a4c0
commit c11764a4c0
parent c3f7fc5d2b
6 changed files with 61 additions and 12 deletions
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@ -44,7 +44,7 @@ export default async function Header() {
          <Button
            color={"purple"}
            text={dict.blog.header.button}
-            className="!px-4 !py-1 sm:flex sm:!px-5 sm:!py-2"
+            className="!px-4 !py-1 sm:flex sm:!px-5 sm:!py-2 capitalize"
          />
          <BurgerButton />
        </div>
--- a/src/app/(routes)/blog/components/pagination/pagination.tsx
+++ b/src/app/(routes)/blog/components/pagination/pagination.tsx
@ -1,6 +1,7 @@
 // components/Pagination.tsx
 "use client";

+import { Dictionary } from "@/app/types/types";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import React from "react";
@ -14,9 +15,10 @@ interface Meta {
 interface PaginationProps {
  meta: Meta;
  baseUrl: string; // اضافه کردن prop برای base URL
+  dict: Dictionary;
 }

-const Pagination: React.FC<PaginationProps> = ({ meta, baseUrl }) => {
+const Pagination: React.FC<PaginationProps> = ({ meta, baseUrl, dict }) => {
  const { current_page, last_page, total } = meta;
  const searchParams = useSearchParams();

@ -100,7 +102,7 @@ const Pagination: React.FC<PaginationProps> = ({ meta, baseUrl }) => {
            className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
            aria-label="First Page"
          >
-            First
+            {dict.blog.pagination.first}
          </Link>
        )}

@ -133,7 +135,7 @@ const Pagination: React.FC<PaginationProps> = ({ meta, baseUrl }) => {
            className="rounded-full border bg-[#EAEAEA] px-3 py-1 text-blog-text-default hover:bg-[#d6d6d6]"
            aria-label="Last Page"
          >
-            Last
+            {dict.blog.pagination.last}
          </Link>
        )}
      </div>
--- a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
+++ b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
@ -8,6 +8,8 @@ import Link from "next/link";
 import NoDataFounded from "../../components/no-data-founded/noDataFounded";
 import Pagination from "../../components/pagination/pagination";
 import { Metadata } from "next";
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";

 export const metadata: Metadata = {
  title: "",
@ -15,7 +17,9 @@ export const metadata: Metadata = {
  openGraph: {
    title: "",
    description: "",
-    images: [`${process.env.NEXT_PUBLIC_FRONT_URL}/og-image?text=filtered posts`],
+    images: [
+      `${process.env.NEXT_PUBLIC_FRONT_URL}/og-image?text=filtered posts`,
+    ],
  },
 };

@ -25,6 +29,8 @@ export default async function FilteredPosts({
 }: FilteredPostsPagepropsType) {
  let filteredPostApiUrl: string;

+  const dict = await getDictionary(getDefaultLocale());
+
  switch (params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()) {
    case "new":
      filteredPostApiUrl = "/posts?sort_field=published_at&sort_direction=desc";
@ -95,14 +101,19 @@ export default async function FilteredPosts({
    <div className="my-10 flex w-full max-w-[1280px] flex-wrap justify-center">
      <div className="flex w-full max-w-[90%] flex-col gap-5">
        <h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
-          {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}
+          {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() === "new"
+            ? dict.blog.filteredPostsPage.newTitle
+            : params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() ===
+                "popular"
+              ? dict.blog.filteredPostsPage.popularTitle
+              : ""}
        </h1>
        <p className="text-[18px] font-[600] text-blog-text-default">
          {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() === "new"
-            ? "Explore the latest posts on our blog. Stay updated with fresh content, insightful articles, and the most recent discussions in your areas of interest."
+            ? dict.blog.filteredPostsPage.newDescription
            : params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() ===
                "popular"
-              ? "Discover the most popular posts with the highest views. These articles have resonated with our audience and are trending across various topics."
+              ? dict.blog.filteredPostsPage.popularDescription
              : ""}
        </p>
      </div>
@ -113,7 +124,7 @@ export default async function FilteredPosts({
              href={"/blog"}
              className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
            >
-              Home
+              {dict.blog.header.Home}
            </Link>
            <span className="mt-[-2px] -rotate-45 scale-[3] select-none text-[12px] font-[400] text-blog-text-passive">
              -
@ -121,7 +132,12 @@ export default async function FilteredPosts({
          </li>
          <li className="flex items-center gap-2">
            <p className="relative text-[12px] font-[600] capitalize text-blog-text-default">
-              {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}
+              {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() === "new"
+                ? dict.blog.filteredPostsPage.newTitle
+                : params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() ===
+                    "popular"
+                  ? dict.blog.filteredPostsPage.popularTitle
+                  : ""}

              <span className="absolute -end-6 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
                {FilteredPostsData.meta.total}
@ -148,7 +164,7 @@ export default async function FilteredPosts({
                <div className="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
+                      {dict.blog.homePage.by}
                    </p>
                    <Link
                      href={"/"}
@ -159,7 +175,7 @@ export default async function FilteredPosts({
                  </div>
                  <div className="whit flex gap-2">
                    <p className="text-[16px] font-[600] text-blog-text-passive">
-                      IN
+                      {dict.blog.homePage.in}
                    </p>
                    <Link
                      href={`/blog/categories/${post.category.slug}`}
@ -189,6 +205,7 @@ export default async function FilteredPosts({
            <Pagination
              meta={FilteredPostsData.meta}
              baseUrl={`/blog/filtered-posts/${params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}`}
+              dict={dict}
            />
          )}
      </div>
--- a/src/app/lib/dictionaries/en.json
+++ b/src/app/lib/dictionaries/en.json
@ -61,6 +61,12 @@
      "by": "BY",
      "in": "IN"
    },
+    "filteredPostsPage": {
+      "newTitle": "new",
+      "popularTitle": "popular",
+      "newDescription": "Explore the latest posts on our blog. Stay updated with fresh content, insightful articles, and the most recent discussions in your areas of interest.",
+      "popularDescription": "Discover the most popular posts with the highest views. These articles have resonated with our audience and are trending across various topics."
+    },
    "header": {
      "Home": "Home",
      "New": "New",
@ -72,6 +78,10 @@
      "Name": "parsa aghayi",
      "Year": "© 2024",
      "CopyRight": "All Rights Reserved , Inc."
+    },
+    "pagination": {
+      "first": "first",
+      "last": "last"
    }
  }
 }
--- a/src/app/lib/dictionaries/fa.json
+++ b/src/app/lib/dictionaries/fa.json
@ -61,6 +61,12 @@
      "by": "نوشته‌شده توسط",
      "in": "در دسته"
    },
+    "filteredPostsPage": {
+      "newTitle": "جدیدترین‌ها",
+      "popularTitle": "محبوب‌ترین‌ها",
+      "newDescription": "آخرین پست های وبلاگ ما را کاوش کنید. با مطالب جدید، مقالات روشنگر و جدیدترین بحث ها در زمینه های مورد علاقه خود به روز باشید.",
+      "popularDescription": "محبوب ترین پست ها را با بیشترین بازدید کشف کنید. این مقالات با مخاطبان ما طنین انداز شده اند و در موضوعات مختلف در حال ترند هستند."
+    },
    "header": {
      "Home": "خانه",
      "New": "جدیدترین‌ها",
@ -72,6 +78,10 @@
      "Name": "پارسا آقایی",
      "Year": "© ۱۴۰۳",
      "CopyRight": "تمامی حقوق محفوظ برای"
+    },
+    "pagination": {
+      "first": "اولین",
+      "last": "آخرین"
    }
  }
 }
--- a/src/app/types/types.ts
+++ b/src/app/types/types.ts
@ -181,6 +181,12 @@ export type Dictionary = {
      by: string;
      in: string;
    };
+    filteredPostsPage: {
+      newTitle: string;
+      popularTitle: string;
+      newDescription: string;
+      popularDescription: string;
+    };
    header: {
      Home: string;
      New: string;
@ -193,6 +199,10 @@ export type Dictionary = {
      Year: string;
      CopyRight: string;
    };
+    pagination: {
+      first: string;
+      last: string;
+    };
  };
 };