Merge pull request #108 from 202306-NEA-DZ-FEW/107-blogs-page-ui-update

107 blogs page UI update
202306-NEA-DZ-FEW · Nov 24, 2023 · 35c3605 · 35c3605
2 parents cb69384 + a4f2f51
commit 35c3605
Show file tree

Hide file tree

Showing 27 changed files with 1,357 additions and 177 deletions.
diff --git a/public/images/blogsillustration.svg b/public/images/blogsillustration.svg
diff --git a/public/locales/ar/blogs.json b/public/locales/ar/blogs.json
diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json
@@ -27,5 +27,6 @@
     "noItemsFound": "لم يتم العثور على عناصر...",
     "prevButton": "الصفحة السابقة",
     "nextButton": "الصفحة الموالية"
-  }
+  },
+  "latestBlogs": "أحدث المدونات"
 }
diff --git a/public/locales/ar/landingPage.json b/public/locales/ar/landingPage.json
@@ -43,6 +43,5 @@
   },
   "items": "العناصر الشائعة",
   "blogs": "المدونات",
-  "latestBlogs": "أحدث مدوناتنا",
   "partners": "شركاؤنا"
 }
diff --git a/public/locales/en/blogs.json b/public/locales/en/blogs.json
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -27,5 +27,6 @@
     "noItemsFound": "No Items Found...",
     "prevButton": "Previous",
     "nextButton": "Next"
-  }
+  },
+  "latestBlogs": "Latest Blogs"
 }
diff --git a/public/locales/en/landingPage.json b/public/locales/en/landingPage.json
@@ -42,6 +42,5 @@
   },
   "items": "Popular items",
   "blogs": "Blogs",
-  "latestBlogs": "Our Latest Blogs",
   "partners": "Our Partners"
 }
diff --git a/public/locales/fr/blogs.json b/public/locales/fr/blogs.json
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -27,5 +27,6 @@
     "noItemsFound": "Aucun élément trouvé...",
     "prevButton": "Précédent",
     "nextButton": "Suivant"
-  }
+  },
+  "latestBlogs": "Nos plus récents blogs"
 }
diff --git a/public/locales/fr/landingPage.json b/public/locales/fr/landingPage.json
@@ -42,6 +42,5 @@
   },
   "items": "Articles populaires",
   "blogs": "Blogs",
-  "latestBlogs": "Nos plus récents blogs",
   "partners": "Nos partenaires"
 }
diff --git a/public/locales/tr/blogs.json b/public/locales/tr/blogs.json
diff --git a/public/locales/tr/common.json b/public/locales/tr/common.json
@@ -27,5 +27,6 @@
     "noItemsFound": "Öğe bulunamadı...",
     "prevButton": "Önceki",
     "nextButton": "Sonraki"
-  }
+  },
+  "latestBlogs": "En Son Bloglarımız"
 }
diff --git a/public/locales/tr/landingPage.json b/public/locales/tr/landingPage.json
@@ -42,6 +42,5 @@
   },
   "items": "Popüler Ürünler",
   "blogs": "Bloglar",
-  "latestBlogs": "En Son Bloglarımız",
   "partners": "İş Ortağımız"
 }
diff --git a/src/components/BlogCard/HorizontalCard.jsx b/src/components/BlogCard/HorizontalCard.jsx
@@ -1,14 +1,16 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
-import { IoIosArrowDropright } from "react-icons/io";
+import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io";
 
-import { formatDate, truncateString } from "@/lib/helpers";
+import { truncateString } from "@/lib/helpers";
 
-function HorizontalCard({ title, description, imageUrl, createdAt, id }) {
-  const { t } = useTranslation();
-  const date = formatDate(createdAt, "MMM YYYY");
-  const truncatedDescription = truncateString(description, 200);
+function HorizontalCard({ description, imageUrl, id, blogKey }) {
+  const { i18n, t } = useTranslation();
+  const truncatedDescription = truncateString(
+    t(`blogs:${blogKey}:description`),
+    200
+  );
   return (
     <div className='card lg:card-side bg-base-100 shadow-xl h-full lg:h-[26rem]'>
       <figure className=' lg:w-[45%]'>
@@ -22,8 +24,11 @@ function HorizontalCard({ title, description, imageUrl, createdAt, id }) {
         />
       </figure>
       <div className='card-body lg:w-[35%] p-6 lg:p-10 gap-4'>
-        <h2 className='card-title text-2xl lg:text-3xl' title={title}>
-          {title}
+        <h2
+          className='card-title text-2xl lg:text-3xl'
+          title={t(`blogs:${blogKey}:title`)}
+        >
+          {t(`blogs:${blogKey}:title`)}
         </h2>
         <p
           className=' text-md lg:text-xl tracking-wide font-light'
@@ -32,14 +37,19 @@ function HorizontalCard({ title, description, imageUrl, createdAt, id }) {
           {truncatedDescription}
         </p>
         <div className='card-actions flex gap-2 justify-between'>
-          <span>{date}</span>
+          <span>{t(`blogs:${blogKey}:shortDate`)}</span>
           <Link
             href={`/blogs/${id}`}
             className='text-secondary font-bold flex items-center gap-2'
           >
             {t("common:buttons:readMore")}
 
-            <IoIosArrowDropright className='text-xl' />
+            {i18n.language !== "ar" ? (
+              <IoIosArrowDropright className='text-xl' />
+            ) : null}
+            {i18n.language === "ar" ? (
+              <IoIosArrowDropleft className='text-xl' />
+            ) : null}
           </Link>
         </div>
       </div>

diff --git a/src/components/BlogCard/__test__/__snapshots__/BlogCard.test.js.snap b/src/components/BlogCard/__test__/__snapshots__/BlogCard.test.js.snap
@@ -5,7 +5,7 @@ exports[`renders correctly 1`] = `
   className="card rounded-xl bg-base-100 shadow-lg h-full w-full"
 >
   <figure
-    className="relative overflow-hidden"
+    className="relative overflow-hidden h-96"
   >
     <img
       alt="Blog Image"
@@ -31,15 +31,15 @@ exports[`renders correctly 1`] = `
   >
     <h2
       className="text-2xl lg:text-3xl text-start font-bold w-full"
+      title="undefined.title"
     >
-      title
+      undefined.title
     </h2>
     <div
       className="flex justify-between items-center py-4"
     >
       <span>
-        2023-10-28
-         
+        undefined.shortDate
       </span>
       <a
         className="text-secondary hover:text-secondary font-bold flex items-center gap-2"

diff --git a/src/components/BlogCard/index.jsx b/src/components/BlogCard/index.jsx
@@ -1,16 +1,13 @@
 import Image from "next/image";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
-import { IoIosArrowDropright } from "react-icons/io";
+import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io";
 
-import { formatDate } from "@/lib/helpers";
-
-function BlogCard({ id, title, imageUrl, createdAt }) {
-  const { t } = useTranslation();
-  const date = formatDate(createdAt, "MMM YYYY");
+function BlogCard({ id, imageUrl, blogKey }) {
+  const { i18n, t } = useTranslation();
   return (
     <div className='card rounded-xl bg-base-100 shadow-lg h-full w-full'>
-      <figure className='relative overflow-hidden'>
+      <figure className='relative overflow-hidden h-96'>
         <Image
           className='w-full h-full object-cover rounded-t-2xl'
           src={imageUrl}
@@ -21,17 +18,25 @@ function BlogCard({ id, title, imageUrl, createdAt }) {
         />
       </figure>
       <div className='flex p-6 flex-1 gap-4 flex-col justify-between items-'>
-        <h2 className='text-2xl lg:text-3xl text-start font-bold w-full'>
-          {title}
+        <h2
+          className='text-2xl lg:text-3xl text-start font-bold w-full'
+          title={t(`blogs:${blogKey}:title`)}
+        >
+          {t(`blogs:${blogKey}:title`)}
         </h2>
         <div className='flex justify-between items-center py-4'>
-          <span>{date} </span>
+          <span>{t(`blogs:${blogKey}:shortDate`)}</span>
           <Link
             href={`/blogs/${id}`}
             className='text-secondary hover:text-secondary font-bold flex items-center gap-2'
           >
             {t("common:buttons:readMore")}
-            <IoIosArrowDropright className='text-xl' />
+            {i18n.language !== "ar" ? (
+              <IoIosArrowDropright className='text-xl' />
+            ) : null}
+            {i18n.language === "ar" ? (
+              <IoIosArrowDropleft className='text-xl' />
+            ) : null}
           </Link>
         </div>
       </div>

diff --git a/src/components/BlogsCard/__test__/__snapshots__/Blogs.test.js.snap b/src/components/BlogsCard/__test__/__snapshots__/Blogs.test.js.snap
@@ -2,82 +2,82 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="flex flex-col gap-10 justify-center items-center  lg:flex-row "
+  className="card bg-base-100 gap-4 shadow-xl h-full lg:h-[26rem]  lg:flex-row "
   dir="ltr"
 >
-  <div
-    className="relative lg:flex-1"
+  <figure
+    className=" lg:w-[45%] lg:h-full h-96 rounded-xl p-4"
   >
-    <figure
-      className="relative w-80 h-60 lg:w-[100%] lg:h-80"
-    >
-      <img
-        alt="Sample Blog Title"
-        className="object-cover w-full h-full rounded-2xl"
-        data-nimg="fill"
-        decoding="async"
-        fetchpriority="high"
-        onError={[Function]}
-        onLoad={[Function]}
-        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        src="/_next/image?url=%2Fsample-image.jpg&w=3840&q=75"
-        srcSet="/_next/image?url=%2Fsample-image.jpg&w=256&q=75 256w, /_next/image?url=%2Fsample-image.jpg&w=384&q=75 384w, /_next/image?url=%2Fsample-image.jpg&w=640&q=75 640w, /_next/image?url=%2Fsample-image.jpg&w=750&q=75 750w, /_next/image?url=%2Fsample-image.jpg&w=828&q=75 828w, /_next/image?url=%2Fsample-image.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fsample-image.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fsample-image.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fsample-image.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fsample-image.jpg&w=3840&q=75 3840w"
-        style={
-          Object {
-            "bottom": 0,
-            "color": "transparent",
-            "height": "100%",
-            "left": 0,
-            "objectFit": undefined,
-            "objectPosition": undefined,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "width": "100%",
-          }
+    <img
+      alt="Blog Image"
+      className="w-full h-full object-cover rounded-xl"
+      data-nimg="1"
+      decoding="async"
+      fetchpriority="high"
+      height={400}
+      onError={[Function]}
+      onLoad={[Function]}
+      src=""
+      style={
+        Object {
+          "color": "transparent",
         }
-      />
-    </figure>
-    <span
-      className="absolute bottom-0 left-0 bg-primary text-white p-2 text-sm lg:hidden"
-    >
-      Invalid date
-    </span>
-  </div>
+      }
+      width={400}
+    />
+  </figure>
   <div
-    className="flex flex-col lg:flex-1 gap-4"
+    className="card-body lg:w-[35%] p-6 lg:p-8 gap-4"
   >
-    <div>
-      <h2
-        className="font-bold text-2xl"
-      >
-        Sample Blog Title
-      </h2>
-      <span
-        className="my-1 text-sm text-gray-500 font-light hidden lg:block"
-      >
-        Invalid date
-      </span>
-    </div>
+    <h2
+      className="card-title text-2xl lg:text-3xl"
+    >
+      undefined.title
+    </h2>
     <p
-      className="text-slate-500"
+      className=" text-md lg:text-xl tracking-wide font-light"
     >
-      Sample description for the blog...
+      undefined.description
     </p>
-    <a
-      href="/blogs/1"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      onTouchStart={[Function]}
+    <div
+      className="card-actions flex gap-2 justify-between"
     >
-      <div>
-        <button
-          className="btn bg-black text-white btn-sm"
+      <span>
+         
+        undefined.shortDate
+      </span>
+      <a
+        className="text-secondary font-bold flex items-center gap-2"
+        href="/blogs/undefined"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onTouchStart={[Function]}
+      >
+        buttons.readMore
+        <svg
+          className="text-xl"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 512 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          buttons.readMore
-        </button>
-      </div>
-    </a>
+          <path
+            d="M210.7 147.6c7.5-7.5 19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81.1-81.9-81.1c-7.6-7.4-7.6-19.6 0-27.2z"
+          />
+          <path
+            d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm32 0c0-47 18.3-91.2 51.6-124.4C164.8 98.3 209 80 256 80s91.2 18.3 124.4 51.6C413.7 164.8 432 209 432 256s-18.3 91.2-51.6 124.4C347.2 413.7 303 432 256 432s-91.2-18.3-124.4-51.6C98.3 347.2 80 303 80 256z"
+          />
+        </svg>
+      </a>
+    </div>
   </div>
 </div>
 `;