From 68ff8107604dd9cab4f83210a2a1d5184d1fee9d Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Mon, 27 Dec 2021 09:37:10 +0330
Subject: [PATCH] update

---
 src/App.js                                  |  4 +-
 src/components/Blogs/design1/BlogDesign1.js | 10 +--
 src/components/Blogs/design4/BlogDesign4.js | 16 ++---
 src/components/Blogs/design5/BlogDesign5.js | 22 +++----
 src/components/Blogs/design6/BlogDesign6.js | 67 +++++++++++----------
 5 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/src/App.js b/src/App.js
index 08e65d1..0464f7e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,9 +19,9 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
       <BlogDesign2 />
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
       <BlogDesign4 />
       <BlogDesign5 />
       <BlogDesign6 />
diff --git a/src/components/Blogs/design1/BlogDesign1.js b/src/components/Blogs/design1/BlogDesign1.js
index 1038b80..5f3f806 100644
--- a/src/components/Blogs/design1/BlogDesign1.js
+++ b/src/components/Blogs/design1/BlogDesign1.js
@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@@ -23,7 +23,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design1 */}
-      <div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
+      <div className="flex items-center justify-around py-2 px-4">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>
@@ -38,9 +38,9 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
               دیگران متوجه شوند.
             </p>
           )}
-          <div className=" flex item-center justify-between mt-5">
+          <div className="flex item-center justify-between w-full mt-4">
             {blogAuthor && (
-              <div className=" flex items-center">
+              <div className="flex items-center">
                 <img src={blogAuthorImg} alt="" className="w-7 h-7" />
                 <p className="text-xs text-lightGrayTextColor mr-2 font-light">
                   حامد دژبانی نسب
@@ -48,7 +48,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
               </div>
             )}
             {blogComments && (
-              <div className=" flex items-center">
+              <div className="flex items-center">
                 <p className="text-xs text-lightGrayTextColor ml-2 font-light">
                   زمان مطالعه 30 دقیقه
                 </p>
diff --git a/src/components/Blogs/design4/BlogDesign4.js b/src/components/Blogs/design4/BlogDesign4.js
index 8b26b5f..fb3a89a 100644
--- a/src/components/Blogs/design4/BlogDesign4.js
+++ b/src/components/Blogs/design4/BlogDesign4.js
@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign4 = () => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
+    <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-black bg-pink-200 p-2 rounded text-base">
@@ -23,18 +23,18 @@ const BlogDesign4 = () => {
         </p>
       </div>
       {/* blog UI Design4 */}
-      <div className="w-full md:w-2/6 flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
+      <div className="flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
         <img
           src={blogImage}
           alt=""
           className="h-full transform translate-x-1/3"
         />
         <div className="w-full transform translate-x-10">
-          <h2 className="text-base md:text-xl text-grayTextColor">
+          <h2 className="text-base text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {/* {blogExcerpt && ( */}
-          <p className="text-sm md:text-base leading-6 my-3 text-grayTextColor">
+          <p className="text-sm text-justify leading-6 my-3 text-grayTextColor">
             در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
             شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
             دیگران متوجه شوند.
@@ -43,18 +43,18 @@ const BlogDesign4 = () => {
           <div className=" flex item-center justify-between mt-5">
             {/* {blogAuthor && ( */}
             <div className=" flex items-center">
-              <img src={blogAuthorImg} alt="" />
-              <p className="text-xs text-lightGrayTextColor mr-2">
+              <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+              <p className="text-xs text-lightGrayTextColor font-light mr-2">
                 حامد دژبانی نسب
               </p>
             </div>
             {/* // )} */}
             {/* {blogComments && ( */}
             <div className=" flex items-center">
-              <p className="text-xs text-lightGrayTextColor ml-2">
+              <p className="text-xs text-lightGrayTextColor font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
-              <img src={commentIcon} alt="" />
+              <img src={commentIcon} alt="" className="w-7 h-7" />
             </div>
             {/* // )} */}
           </div>
diff --git a/src/components/Blogs/design5/BlogDesign5.js b/src/components/Blogs/design5/BlogDesign5.js
index 24f122d..4ca309a 100644
--- a/src/components/Blogs/design5/BlogDesign5.js
+++ b/src/components/Blogs/design5/BlogDesign5.js
@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-4/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@@ -23,37 +23,37 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design5 */}
-      <div className="w-full md:w-2/5 flex items-center justify-around p-6  rounded-md shadow-md	">
+      <div className="flex items-center justify-around p-6  rounded-md shadow-md bg-white">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>
         <div className="w-8/12 mr-4">
-          <h2 className="text-base md:text-xl text-justify text-grayTextColor">
+          <h2 className="text-base text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (
-            <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
+            <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
             </p>
           )}
 
-          <div className=" flex item-center justify-between mt-5">
+          <div className="flex item-center justify-between w-full mt-4">
             {blogAuthor && (
-              <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" />
-                <p className="text-xs text-lightGrayTextColor mr-2">
+              <div className="flex items-center">
+                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+                <p className="text-xs text-lightGrayTextColor font-light mr-2">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
-              <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor ml-2">
+              <div className="flex items-center">
+                <p className="text-xs text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" />
+                <img src={commentIcon} alt="" className="w-7 h-7" />
               </div>
             )}
           </div>
diff --git a/src/components/Blogs/design6/BlogDesign6.js b/src/components/Blogs/design6/BlogDesign6.js
index 92930b2..4b40d8b 100644
--- a/src/components/Blogs/design6/BlogDesign6.js
+++ b/src/components/Blogs/design6/BlogDesign6.js
@@ -5,9 +5,9 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
-const BlogDesign6 = () => {
+const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@@ -24,40 +24,35 @@ const BlogDesign6 = () => {
       </div>
       {/* blog UI Design6 */}
       <div className="">
-        <img
-          src={blogImage}
-          alt=""
-          className="w-full
-"
-        />
+        <img src={blogImage} alt="" className="w-full" />
         <div className="py-2">
-          <h2 className="text-base md:text-xl text-justify text-grayTextColor">
+          <h2 className="text-base text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
-          {/* {blogExcerpt && ( */}
-          <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
-            در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
-            شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
-            دیگران متوجه شوند.
-          </p>
-          {/* // )} */}
-          <div className=" flex item-center justify-between mt-5">
-            {/* {blogAuthor && ( */}
-            <div className=" flex items-center">
-              <img src={blogAuthorImg} alt="" />
-              <p className="text-xs text-lightGrayTextColor mr-2">
-                حامد دژبانی نسب
-              </p>
-            </div>
-            {/* // )} */}
-            {/* {blogComments && ( */}
-            <div className=" flex items-center">
-              <p className="text-xs text-lightGrayTextColor ml-2">
-                زمان مطالعه 30 دقیقه
-              </p>
-              <img src={commentIcon} alt="" />
-            </div>
-            {/* // )} */}
+          {blogExcerpt && (
+            <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
+              در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
+              شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
+              دیگران متوجه شوند.
+            </p>
+          )}
+          <div className="flex item-center justify-between w-full mt-4">
+            {blogAuthor && (
+              <div className=" flex items-center">
+                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+                <p className="text-xs text-lightGrayTextColor mr-2">
+                  حامد دژبانی نسب
+                </p>
+              </div>
+            )}
+            {blogComments && (
+              <div className=" flex items-center">
+                <p className="text-xs text-lightGrayTextColor ml-2">
+                  زمان مطالعه 30 دقیقه
+                </p>
+                <img src={commentIcon} alt="" className="w-7 h-7" />
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -66,3 +61,9 @@ const BlogDesign6 = () => {
 };
 
 export default BlogDesign6;
+
+BlogDesign6.defaultProps = {
+  blogExcerpt: true,
+  blogAuthor: true,
+  blogComments: true,
+};