blog homePage intenationalization added

2024-10-21 11:13:18 +03:30 · 2024-10-21 11:13:18 +03:30 · c3f7fc5d2b
commit c3f7fc5d2b
parent fc9fcf6a9a
11 changed files with 131 additions and 37 deletions
--- 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>
  );
 }
--- 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 />
--- 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>
  );
--- 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">
--- 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>
--- 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>

--- 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}`}
--- 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} />
--- 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."
+    }
  }
 }
--- 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": "تمامی حقوق محفوظ برای"
    }
  }
--- 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 = {