From c3f7fc5d2bf9b91f8cca60710f93df6d1812e3f9 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 21 Oct 2024 11:13:18 +0330
Subject: [PATCH] blog homePage intenationalization added

---
 .../blog/components/footer/footer.tsx         | 18 +++++++++----
 .../blog/components/header/header.tsx         | 10 +++++---
 .../blog/components/header/navLinks.tsx       | 12 +++++----
 .../components/home/Categories/Categories.tsx | 13 ++++++----
 .../home/filtered-posts/filteredPosts.tsx     | 19 ++++++++------
 .../(routes)/blog/components/home/new/new.tsx | 13 ++++++----
 .../blog/components/home/random/random.tsx    | 11 +++++---
 src/app/(routes)/blog/page.tsx                |  1 -
 src/app/lib/dictionaries/en.json              | 23 +++++++++++++++++
 src/app/lib/dictionaries/fa.json              | 25 ++++++++++++++++++-
 src/app/types/types.ts                        | 23 +++++++++++++++++
 11 files changed, 131 insertions(+), 37 deletions(-)

diff --git a/src/app/(routes)/blog/components/footer/footer.tsx b/src/app/(routes)/blog/components/footer/footer.tsx
index 71600a5..df987c8 100644
--- a/src/app/(routes)/blog/components/footer/footer.tsx
+++ b/src/app/(routes)/blog/components/footer/footer.tsx
@@ -1,8 +1,11 @@
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
 import Link from "next/dist/client/link";
 import Image from "next/image";
 import React from "react";
 
-export default function Footer() {
+export default async function Footer() {
+  const dict = await getDictionary(getDefaultLocale());
   return (
     <div className="absolute bottom-0 flex w-full flex-wrap items-center justify-around gap-5 bg-white px-1 py-5">
       <Image
@@ -18,12 +21,17 @@ export default function Footer() {
         height={50}
         alt="parsaaghayi's blog logo"
       />
-      <p className="flex items-center gap-2 text-[14px] font-[400] capitalize text-blog-text-passive">
-        All Rights Reserved 2024
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <p className="py-2 text-[14px] font-[400] capitalize text-blog-text-passive">
+          {dict.website.footer.Year}
+        </p>
+        <p className="py-2 text-[14px] font-[400] capitalize text-blog-text-passive">
+          {dict.website.footer.CopyRight}
+        </p>
         <Link href={"/"} className="font-bold hover:underline">
-          parsa aghayi
+          {dict.website.footer.Name}
         </Link>
-      </p>
+      </div>
     </div>
   );
 }
diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index 8805e37..f5db71e 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -6,8 +6,12 @@ import Link from "next/link";
 import BurgerButton from "../burger-button/burgerButton";
 import { cookies } from "next/headers";
 import SelectLanguage from "../selectLanguage/selectLanguage";
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
+
+export default async function Header() {
+  const dict = await getDictionary(getDefaultLocale());
 
-export default function Header() {
   return (
     <div className="fixed z-50 flex w-full items-center justify-center bg-blog-background py-10">
       <div className="top-10 flex w-[1280px] items-center justify-between px-2">
@@ -22,7 +26,7 @@ export default function Header() {
           </div>
         </Link>
         <div className="flex items-center">
-          <NavLinks className="hidden md:flex" />
+          <NavLinks className="hidden md:flex" dict={dict} />
           <SelectLanguage
             className="hidden md:flex"
             selectedLocale={cookies().get("selectedLocale")}
@@ -39,7 +43,7 @@ export default function Header() {
           />
           <Button
             color={"purple"}
-            text={"Subscribe"}
+            text={dict.blog.header.button}
             className="!px-4 !py-1 sm:flex sm:!px-5 sm:!py-2"
           />
           <BurgerButton />
diff --git a/src/app/(routes)/blog/components/header/navLinks.tsx b/src/app/(routes)/blog/components/header/navLinks.tsx
index ff39e65..7819e47 100644
--- a/src/app/(routes)/blog/components/header/navLinks.tsx
+++ b/src/app/(routes)/blog/components/header/navLinks.tsx
@@ -2,12 +2,14 @@
 
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { Dictionary } from "@/app/types/types";
 
 type NavLinksPropsType = {
   className?: string;
+  dict: Dictionary;
 };
 
-export function NavLinks({ className }: NavLinksPropsType) {
+export function NavLinks({ className, dict }: NavLinksPropsType) {
   const pathname = usePathname();
 
   return (
@@ -16,25 +18,25 @@ export function NavLinks({ className }: NavLinksPropsType) {
         className={`text-[16px] font-[600] ${pathname === "/blog" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
         href="/blog"
       >
-        Home
+        {dict.blog.header.Home}
       </Link>
       <Link
         className={`text-[16px] font-[600] ${pathname === "/blog/filtered-posts/new" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
         href="/blog/filtered-posts/new"
       >
-        New
+        {dict.blog.header.New}
       </Link>
       <Link
         className={`text-[16px] font-[600] ${pathname === "/blog/filtered-posts/popular" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
         href="/blog/filtered-posts/popular"
       >
-        Popular
+        {dict.blog.header.Popular}
       </Link>
       <Link
         className={`text-[16px] font-[600] ${pathname === "/blog/categories" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
         href="/blog/categories"
       >
-        Categories
+        {dict.blog.header.Categories}
       </Link>
     </nav>
   );
diff --git a/src/app/(routes)/blog/components/home/Categories/Categories.tsx b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
index 406fc10..f1e6c09 100644
--- a/src/app/(routes)/blog/components/home/Categories/Categories.tsx
+++ b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
@@ -1,3 +1,5 @@
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
 import { CategoryType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,18 +8,19 @@ interface CategoriesProps {
   data: CategoryType[];
 }
 
-export default function Categories({ data }: CategoriesProps) {
+export default async function Categories({ data }: CategoriesProps) {
+  const dict = await getDictionary(getDefaultLocale());
   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">
-          Categories
+          {dict.blog.homePage.categories}
         </h2>
         <Link
           href={"/blog/categories"}
           className="text-[16px] font-[400] text-blog-text-passive hover:underline"
         >
-          View all
+          {dict.blog.homePage.viewAll}
         </Link>
       </div>
 
@@ -26,7 +29,7 @@ export default function Categories({ data }: CategoriesProps) {
           <Link
             key={category.id}
             href={`/blog/categories/${category.slug}`}
-            className="flex flex-col w-[45%] 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%]"
+            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
@@ -34,7 +37,7 @@ export default function Categories({ data }: CategoriesProps) {
                 width={300}
                 height={200}
                 alt="readinglist-1 title image"
-                className="rounded mt-2"
+                className="mt-2 rounded"
               />
             </div>
             <h3 className="text-[24px] font-[600] text-blog-text-default">
diff --git a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
index 521a5bd..276bb8d 100644
--- a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
+++ b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
@@ -1,3 +1,5 @@
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
 import { PostType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,27 +8,28 @@ interface FilteredPostsProps {
   data: PostType[];
 }
 
-export default function FilteredPosts({ data }: FilteredPostsProps) {
+export default async function FilteredPosts({ data }: FilteredPostsProps) {
+  const dict = await getDictionary(getDefaultLocale());
   return (
     <div className="mb-5 flex 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">
-          Popular
+          {dict.blog.homePage.popular}
         </h2>
         <Link
           href={"/blog/filtered-posts/popular"}
           className="text-[16px] font-[400] text-blog-text-passive hover:underline"
         >
-          View all
+          {dict.blog.homePage.viewAll}
         </Link>
       </div>
 
-      <div className="flex w-full flex-wrap justify-center gap-5 items-center">
+      <div className="flex w-full flex-wrap items-center justify-center gap-5">
         <div className="flex w-full flex-wrap justify-center gap-5 md:w-[50%]">
           {data.slice(1).map((post) => (
             <div
               key={post.id}
-              className="flex min-h-[200px] p-5 w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"
+              className="flex min-h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white p-5 px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"
             >
               <Link
                 href={`/blog/categories/${post.category.slug}`}
@@ -55,7 +58,7 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
           <div className="absolute flex flex-wrap gap-5 p-10">
             <div className="z-10 flex w-full items-center justify-start gap-2">
               <p className="text-[15px] font-[400] text-white sm:text-[16px]">
-                BY
+                {dict.blog.homePage.by}
               </p>
               <Link
                 href={"/"}
@@ -64,7 +67,7 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
                 {data[0].author.name}
               </Link>
               <p className="text-[15px] font-[400] text-white sm:text-[16px]">
-                IN
+                {dict.blog.homePage.in}
               </p>
               <Link
                 href={`/blog/categories/${data[0].category.slug}`}
@@ -76,7 +79,7 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
 
             <Link
               href={`/blog/posts/${data[0].slug}`}
-              className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px] hover:underline"
+              className="z-10 w-full text-[18px] font-[600] text-white hover:underline sm:text-[28px]"
             >
               {data[0].title}
             </Link>
diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx
index 773e20b..52e3032 100644
--- a/src/app/(routes)/blog/components/home/new/new.tsx
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -1,3 +1,5 @@
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
 import { PostType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,7 +8,8 @@ interface NewProps {
   data: PostType[];
 }
 
-export default function New({ data }: NewProps) {
+export default async function New({ data }: NewProps) {
+  const dict = await getDictionary(getDefaultLocale());
   return (
     <div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
       <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:h-auto md:w-[60%]">
@@ -21,7 +24,7 @@ export default function New({ data }: NewProps) {
         <div className="absolute flex flex-wrap gap-5 p-10">
           <div className="z-10 flex w-full items-center justify-start gap-2">
             <p className="text-[15px] font-[400] text-white sm:text-[16px]">
-              BY
+              {dict.blog.homePage.by}
             </p>
             <Link
               href={"/"}
@@ -30,7 +33,7 @@ export default function New({ data }: NewProps) {
               {data[0].author.name}
             </Link>
             <p className="text-[15px] font-[400] text-white sm:text-[16px]">
-              IN
+              {dict.blog.homePage.in}
             </p>
             <Link
               href={`/blog/categories/${data[0].category.name}`}
@@ -55,12 +58,12 @@ export default function New({ data }: NewProps) {
 
       <div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-5">
         <div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:gap-8 lg:pb-6 xl:pb-10">
-          <h2 className="text-[24px] font-[700] text-blog-text-default">New</h2>
+          <h2 className="text-[24px] font-[700] text-blog-text-default">{dict.blog.homePage.new}</h2>
           <Link
             href={"/blog/filtered-posts/new"}
             className="text-[16px] font-[400] text-blog-text-passive hover:underline"
           >
-            View all
+            {dict.blog.homePage.viewAll}
           </Link>
         </div>
 
diff --git a/src/app/(routes)/blog/components/home/random/random.tsx b/src/app/(routes)/blog/components/home/random/random.tsx
index a9d4452..4d96ceb 100644
--- a/src/app/(routes)/blog/components/home/random/random.tsx
+++ b/src/app/(routes)/blog/components/home/random/random.tsx
@@ -1,3 +1,5 @@
+import { getDictionary } from "@/app/lib/functions/dictionaries";
+import { getDefaultLocale } from "@/app/lib/functions/utils";
 import { PostType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
@@ -6,12 +8,13 @@ interface RandomProps {
   data: PostType[];
 }
 
-export default function Random({ data }: RandomProps) {
+export default async function Random({ data }: RandomProps) {
+  const dict = await getDictionary(getDefaultLocale());
   return (
     <div className="mb-10 flex w-full max-w-[90%] flex-wrap gap-10">
       <div className="flex w-full items-center justify-between">
         <h2 className="text-[36px] font-[700] text-blog-text-default">
-          Random
+          {dict.blog.homePage.random}
         </h2>
       </div>
       <div className="flex w-full flex-wrap justify-center gap-10">
@@ -30,7 +33,7 @@ export default function Random({ data }: RandomProps) {
             <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
               <div className="flex">
                 <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
+                  {dict.blog.homePage.by}
                 </p>
                 <Link
                   href={"/"}
@@ -41,7 +44,7 @@ export default function Random({ data }: RandomProps) {
               </div>
               <div className="flex">
                 <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
-                  IN
+                  {dict.blog.homePage.in}
                 </p>
                 <Link
                   href={`/blog/categories/${randomPost.category.name}`}
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index 3ff7b4f..4518dbe 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -12,7 +12,6 @@ export default async function Blog() {
   } = await fetch(`${process.env.NEXT_PUBLIC_BLOG_API_URL}/homepage`).then(
     (res) => res.json(),
   );
-
   return (
     <div className="flex w-full max-w-[1280px] flex-col items-center gap-[50px] pt-5 md:gap-[100px]">
       <New data={homePageData.latest_posts} />
diff --git a/src/app/lib/dictionaries/en.json b/src/app/lib/dictionaries/en.json
index 13bca4d..2f360ca 100644
--- a/src/app/lib/dictionaries/en.json
+++ b/src/app/lib/dictionaries/en.json
@@ -50,5 +50,28 @@
       "Year": "© 2024",
       "CopyRight": "All Rights Reserved , Inc."
     }
+  },
+  "blog": {
+    "homePage": {
+      "viewAll": "viewAll",
+      "new": "new",
+      "categories": "categories",
+      "popular": "popular",
+      "random": "random",
+      "by": "BY",
+      "in": "IN"
+    },
+    "header": {
+      "Home": "Home",
+      "New": "New",
+      "Popular": "Popular",
+      "Categories": "Categories",
+      "button": "subscribe"
+    },
+    "footer": {
+      "Name": "parsa aghayi",
+      "Year": "© 2024",
+      "CopyRight": "All Rights Reserved , Inc."
+    }
   }
 }
diff --git a/src/app/lib/dictionaries/fa.json b/src/app/lib/dictionaries/fa.json
index 019e2d2..a6c06c1 100644
--- a/src/app/lib/dictionaries/fa.json
+++ b/src/app/lib/dictionaries/fa.json
@@ -47,7 +47,30 @@
       "Testimonials": "دیدگاه‌ها",
       "Contact": "تماس",
       "Blog": "بلاگ",
-      "Year": "© ۲۰۲۴",
+      "Year": "© ۱۴۰۳",
+      "CopyRight": "تمامی حقوق محفوظ برای"
+    }
+  },
+  "blog": {
+    "homePage": {
+      "viewAll": "نمایش همه",
+      "new": "جدیدترین‌ها",
+      "categories": "دسته‌بندی‌ها",
+      "popular": "محبوب‌ترین‌ها",
+      "random": "اتفاقی",
+      "by": "نوشته‌شده توسط",
+      "in": "در دسته"
+    },
+    "header": {
+      "Home": "خانه",
+      "New": "جدیدترین‌ها",
+      "Popular": "محبوب‌ترین‌ها",
+      "Categories": "دسته‌بندی‌ها",
+      "button": "اشتراک در خبرنامه"
+    },
+    "footer": {
+      "Name": "پارسا آقایی",
+      "Year": "© ۱۴۰۳",
       "CopyRight": "تمامی حقوق محفوظ برای"
     }
   }
diff --git a/src/app/types/types.ts b/src/app/types/types.ts
index d346a13..41f3eb7 100644
--- a/src/app/types/types.ts
+++ b/src/app/types/types.ts
@@ -171,6 +171,29 @@ export type Dictionary = {
       CopyRight: string;
     };
   };
+  blog: {
+    homePage: {
+      viewAll: string;
+      new: string;
+      categories: string;
+      popular: string;
+      random: string;
+      by: string;
+      in: string;
+    };
+    header: {
+      Home: string;
+      New: string;
+      Popular: string;
+      Categories: string;
+      button: string;
+    };
+    footer: {
+      Name: string;
+      Year: string;
+      CopyRight: string;
+    };
+  };
 };
 
 export type SkillType = {