design 5 added

src/App.js

@@ -8,6 +8,7 @@ import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
 import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
 import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
 import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
+import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
 
 function App() {
   return (
@@ -20,7 +21,8 @@ function App() {
       <BlogDesign1 />
       {/* <BlogDesign2 /> */}
       {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
+      <BlogDesign5 />
     </div>
   );
 }

src/components/Blogs/design5/BlogDesign5.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+import blogImage from "../../../assets/images/blog-featured-image.jpg";
+import blogAuthorImg from "../../../assets/images/blog-author.png";
+
+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">
+      {/* title holder */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
+          طراحی بلاگ 5
+        </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/design5
+          </span>
+        </p>
+      </div>
+      {/* blog UI Design5 */}
+      <div className="w-full md:w-2/5 flex items-center justify-around p-6  rounded-md shadow-2xl	shadow-black	">
+        <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>
+          {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>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BlogDesign5;
+
+BlogDesign5.defaultProps = {
+  blogExcerpt: true,
+  blogAuthor: true,
+  blogComments: true,
+};