filteredPosts page internationalization added

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>

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>

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>

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

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": "آخرین"
     }
   }
 }

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