update src/components/Blogss/design1/index.js, src/index.scss and data.js

src/components/Blogss/design1/index.js

@@ -1,62 +1,47 @@
-import blogImage from "../assets/blog-featured-image.jpg";
-import blogAuthorImg from "../assets/blog-author.png";
-import commentIcon from "../assets/light-gray-comment-icon.svg";
-
 const BlogDesign1 = ({
+  blogTitle,
   blogExcerpt,
   blogAuthor,
   blogComments,
-  commentNumBgColor,
-  commentNumTextColor,
-  commentNumTopPosition,
-  commentNumRightPosition,
+  commentNum,
+  featuredImage,
+  commentIcon,
+  commentClassname,
 }) => {
   return (
     <div className="w-fit flex items-strech justify-around p-4 bg-white">
-      <div className="w-fit">
-        <img
-          src="images/blog-featured-image.jpg"
-          alt="blogImage"
-          className="shrink"
-        />
-      </div>
+      <img src={featuredImage} alt="blogImage" className="shrink" />
       <div className="flex-1 flex flex-col justify-between mr-4 py-2">
-        <div>
+        <div className="flex flex-col">
+          {blogTitle && (
             <h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
-            آیا مواد غذای پر فیبر و مفید هستند؟
+              {blogTitle}
             </h2>
+          )}
           {blogExcerpt && (
-            <p className="text-justify text-sm leading-6 my-1 text-[#646464] mt-3">
-              در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
-              شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
-              دیگران متوجه شوند.
+            <p className="mt-4 text-justify text-sm text-[#646464] leading-6">
+              {blogExcerpt}
             </p>
           )}
         </div>
-        <div className="flex item-center justify-between w-full mt-2">
+        <div className="w-full flex item-center justify-between mt-2">
           {blogAuthor && (
             <div className="flex items-center">
-              <img src="images/blog-author.png" alt="" className="w-8 h-8" />
-              <p className="text-sm text-lightGrayTextColor mr-2 font-light">
-                حامد دژبانی نسب
+              <img src="images/blog-author.png" alt="author" className="w-8" />
+              <p className="text-sm text-[#818181] mr-2 font-light">
+                {blogAuthor}
               </p>
             </div>
           )}
           {blogComments && (
             <div className="flex items-center">
-              <p className="text-sm text-lightGrayTextColor ml-2 font-light">
-                زمان مطالعه 30 دقیقه
+              <p className="text-sm text-[#818181] ml-2 font-light">
+                {blogComments}
               </p>
-              <div className="relative">
-                <img
-                  src="images/light-gray-comment-icon.svg"
-                  alt=""
-                  className="w-7 h-7"
-                />
-                <span
-                  className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
-                >
-                  26
+              <div class="relative">
+                <img class="w-7 rounded-full" src={commentIcon} alt="" />
+                <span class="w-6 h-6 text-center flex flex-col items-center justify-center font-sansbold absolute top-0 right-0 transform translate-x-2 -translate-y-2 text-[10px] bg-[#818181] text-white border-2 border-white dark:border-gray-800 rounded-full">
+                  {commentNum}
                 </span>
               </div>
             </div>
@@ -70,12 +55,17 @@ const BlogDesign1 = ({
 export default BlogDesign1;
 
 BlogDesign1.defaultProps = {
-  blogExcerpt: true,
-  blogAuthor: true,
-  blogComments: true,
+  blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
+  blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
+  شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
+  دیگران متوجه شوند.
+`,
+  blogAuthor: `حامد دژبانی نسب`,
+  blogComments: `زمان مطالعه 30 دقیقه`,
+  commentNum: `26`,
+
+  featuredImage: "images/blog-featured-image.jpg",
+  commentIcon: "images/light-gray-comment-icon.svg",
 
-  commentNumBgColor: "bg-[#818181]",
-  commentNumTextColor: "text-white",
-  commentNumTopPosition: "-top-2",
-  commentNumRightPosition: "-right-2",
+  commentClassname: "bg-[#818181] text-white -top-2 -right-2",
 };

src/index.scss

@@ -28,15 +28,6 @@ body {
   direction: ltr;
 }
 
-.comment-num {
-  font-size: 8px;
-  padding-top: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
-  border-radius: 50%;
-}
-
 // TODO Start FormInput Component
 
 .rmdp-container {

src/redux/data.js

@@ -7,6 +7,7 @@ import Alert from "../components/Alert";
 import Toast from "../components/Toast";
 import Banners from "../components/Banners";
 import Blogss from "../components/Blogss";
+import CardTrelloDesign from "../components/CardTrelloDesign";
 
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
@@ -188,6 +189,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Card",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Card Designs",
+      component: <CardTrelloDesign />,
+      code: null,
+    },
+  },
 ];
 
 export default components;