update App.js, src/components/CardTrelloDesign/index.js, src/components/NewTagDesign/index.js and src/components/ProfilePicNextToEachOther/index.js

src/App.js

@@ -128,7 +128,7 @@ function App() {
 
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ProductTags /> */}
-        {/* <NewTagDesign /> */}
+        <NewTagDesign />
 
         {/* <CounterDesign /> */}
 
@@ -162,7 +162,7 @@ function App() {
         {/* <CourseChapter /> */}
 
         {/* <Design1 /> */}
-        <Design2 />
+        {/* <Design2 /> */}
 
         {/* <SidebarMenu /> */}
         {/* <SidebarDesign2 /> */}

src/components/CardTrelloDesign/index.js

@@ -93,21 +93,14 @@ const CardTrelloDesign = ({
               </div>
             </div>
           )}
+
           {showTag &&
             tags.map((tag) => (
               <NewTagDesign
                 title={tag.title}
-                align={"flex-row-reverse"}
-                titleColor={`${tag.color}`}
-                tagBgColor={`${tag.backgroundColor}`}
-                border={"border-none"}
-                borderRadius={"rounded-sm"}
-                iconWidth={"w-4"}
-                marginRight="mr-0"
-                marginLeft="ml-1"
+                tagClassName={`flex-row-reverse rounded-sm p-1 text-xs ${tag.className}`}
+                iconClassName={"w-4 mr-0 ml-1"}
                 icon={tag.icon}
-                paddingY={"p-1"}
-                paddingX={"p-1"}
               />
             ))}
         </div>
@@ -148,14 +141,12 @@ CardTrelloDesign.defaultProps = {
   tags: [
     {
       title: "29 فروردین",
-      color: "text-[#007987]",
-      backgroundColor: "bg-[#06BACE33]",
+      className: "text-[#007987] bg-[#06BACE33]",
       icon: clock,
     },
     {
       title: "12 از 13",
-      color: "text-[#FFAA00]",
-      backgroundColor: "bg-[#FFAA0033]",
+      className: "text-[#FFAA00] bg-[#FFAA0033]",
       icon: nike,
     },
   ],

src/components/NewTagDesign/index.js

@@ -2,35 +2,11 @@ import React from "react";
 
 import blackCancleIcon from "./black-cancle-icon.svg";
 
-const NewTagDesign = ({
-  titleColor,
-  title,
-  tagBgColor,
-  tagBorderColor,
-  icon,
-  fontSize,
-  fontWeight,
-  border,
-  borderRadius,
-  iconWidth,
-  marginRight,
-  marginLeft,
-  align,
-  paddingY,
-  paddingX,
-}) => {
+const NewTagDesign = ({ title, icon, tagClassName, iconClassName }) => {
   return (
-    <button
-      className={`flex ${align} ${fontWeight} items-center ${borderRadius} ${paddingY} ${paddingX} ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
-    >
+    <button className={`flex items-center ${tagClassName}`}>
       {title}
-      {icon && (
-        <img
-          src={icon}
-          alt=""
-          className={`${marginRight} ${marginLeft} ${iconWidth}`}
-        />
-      )}
+      {icon && <img src={icon} alt="" className={` ${iconClassName}`} />}
     </button>
   );
 };
@@ -39,19 +15,10 @@ export default NewTagDesign;
 
 NewTagDesign.defaultProps = {
   title: "کتاب",
-  align: "flex-row",
-  titleColor: "text-blue-600",
-  tagBgColor: "bg-blue-300",
-  border: "border-2",
-  borderRadius: "rounded-full",
-  tagBorderColor: "border-blue-600",
-  fontSize: "text-xs",
-  fontWeight: "font-bold",
-  iconWidth: "w-2.5",
-  marginRight: "mr-5",
-  paddingY: "p-2",
-  paddingX: "p-1",
-  marginLeft: "ml-4",
-  // for icons
+
+  tagClassName:
+    "flex flex-row items-center text-blue-600 text-xs font-sansbold p-1 p-2 bg-blue-300 border-2 border-blue-600 rounded-full",
+  iconClassName: "w-2.5 mr-5 ml-4",
+
   icon: blackCancleIcon,
 };

src/components/ProfilePicNextToEachOther/index.js

@@ -14,9 +14,8 @@ const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => {
           <img
             key={i}
             src={user.picture}
-            className={`rounded-full ${width}`}
+            className={`rounded-full ml-0.5 ${width}`}
             alt="profile-pic"
-            style={{ marginLeft: `${marginLeft}` }}
           />
           {Number(i) === num - 1 && (
             <div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600">
@@ -33,8 +32,9 @@ export default ProfilePicNextToEachOther;
 
 ProfilePicNextToEachOther.defaultProps = {
   num: 8,
-  marginLeft: "-10px",
-  width: "w-10",
+
+  circleClass: "w-10",
+
   users: [
     {
       picture: profilePic1,