update

src/App.js

@@ -6,6 +6,7 @@ import CounterDesign from "./components/counterDesign/CounterDesign";
 import { BookDesign } from "./components/bookDesign/BookDesign";
 import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
 import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
+import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
       {/* <CounterDesign /> */}
       {/* <BlogDesign1 /> */}
       <BlogDesign2 />
+      {/* <BlogDesign3 /> */}
     </div>
   );
 }

src/components/Blogs/design2/BlogDesign2.js

@@ -5,7 +5,7 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
 
-const BlogDesign2 = () => {
+const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -23,14 +23,26 @@ const BlogDesign2 = () => {
         </p>
       </div>
       {/* blog UI Design2 */}
-      <div className="bg-red-400 relative w-full md:w-1/4">
+      <div className="relative w-full md:w-1/4">
-        <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
+        {dateButton && (
-          1400/09/19
+          <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
-        </button>
+            1400/09/19
+          </button>
+        )}
+        {tagButton && (
+          <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
+            تگ
+          </button>
+        )}
         <img src={blogFeaturedImage2} alt="" className="w-full" />
-        <h2 className="absolute right-2 bottom-16 text-white text-lg">
+        <div className="absolute right-2 bottom-16">
-          آیا مواد غذایی پر فیبر مفید هستند؟
+          <h2 className="text-white text-lg">
-        </h2>
+            آیا مواد غذایی پر فیبر مفید هستند؟
+          </h2>
+          {blogSubTitle && (
+            <h2 className="text-white text-lg">شما چه فکری می کنید</h2>
+          )}
+        </div>
         <div className="flex item-center justify-around absolute right-2 bottom-1 w-full">
           {/* {blogAuthor && ( */}
           <div className="flex items-center">
@@ -52,3 +64,9 @@ const BlogDesign2 = () => {
 };
 
 export default BlogDesign2;
+
+BlogDesign2.defaultProps = {
+  blogSubTitle: true,
+  dateButton: false,
+  tagButton: true,
+};

src/components/Blogs/design3/BlogDesign3.js

@@ -0,0 +1,68 @@
+import React from "react";
+
+import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
+import blogAuthorImg from "../../../assets/images/blog-author.png";
+
+import commentIcon from "../../../assets/icons/black-comment-icon.svg";
+
+const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
+  return (
+    <section className="w-11/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">
+          طراحی بلاگ 3
+        </h2>
+      </div>
+      <div className="mb-6">
+        <p className="leading-10">
+          آدرس:
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            blogs/design3
+          </span>
+        </p>
+      </div>
+      {/* blog UI Design3 */}
+      <div className="w-full md:w-1/4 relative">
+        <img src={blogFeaturedImage2} alt="" />
+        <div className="w-11/12	m-auto p-2 rounded-lg shadow-md bg-white absolute -bottom-16 right-4 ">
+          <h2 className="text-base md:text-xl text-justify text-productTitle">
+            آیا مواد غذای پر فیبر و مفید هستند؟
+          </h2>
+          {blogSubTitle && (
+            <h2 className="text-base md:text-xl text-justify text-productTitle mt-2">
+              نظر شما چیه
+            </h2>
+          )}
+
+          <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>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BlogDesign3;
+
+BlogDesign3.defaultProps = {
+  blogSubTitle: true,
+  blogAuthor: true,
+  blogComments: true,
+};

src/components/Blogs/design4/BlogDesign4.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const BlogDesign4 = () => {
+  return <div></div>;
+};
+
+export default BlogDesign4;