update App.js and src/components/CardTrelloDesign/index.js

src/App.js

@@ -74,6 +74,7 @@ import IndianaDragScroll from "./components/IndianaDragScroll";
 import TestComponentNew from "./components/TestComponentNew";
 import CardTrelloDesign from "./components/CardTrelloDesign";
 import CircleInCircle from "./components/CircleInCircle";
+import NewTagDesign from "./components/NewTagDesign";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -87,7 +88,7 @@ function App() {
         {/* <VodProductNew /> */}
         {/* <BookDesign /> */}
         {/* <ButtonDesign /> */}
-        {/* <ProductTags /> */}
+        <ProductTags />
         {/* <CounterDesign /> */}
         {/* <BlogDesign1 /> */}
         {/* <BlogDesign2 /> */}
@@ -156,6 +157,7 @@ function App() {
         {/* <TestComponentNew /> */}
         <CardTrelloDesign />
         {/* <CircleInCircle /> */}
+        {/* <NewTagDesign /> */}
       </div>
     </Provider>
   );

src/components/CardTrelloDesign/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import ButtonNewDesign from "../ButtonNewDesign";
 import CircleInCircle from "../CircleInCircle";
+import NewTagDesign from "../NewTagDesign";
 
 import profilePic1 from "./images/profilePic1.svg";
 import profilePic2 from "./images/profilePic2.svg";
@@ -73,7 +74,10 @@ const CardTrelloDesign = ({ circle, pictures }) => {
           ))}
         </div>
         {/* left */}
-        <button>mahdi</button>
+        <div className="flex flex-row items-center gap-x-1">
+          <NewTagDesign />
+          <NewTagDesign />
+        </div>
       </div>
     </div>
   );

src/components/NewTagDesign/black-cancle-icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10.471" height="10.471" viewBox="0 0 10.471 10.471">
+  <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
+    <g id="card-remove" transform="translate(253.309 512.31)">
+      <path id="Vector" d="M0,8.774,8.774,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+      <path id="Vector-2" data-name="Vector" d="M8.774,8.774,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
+    </g>
+  </g>
+</svg>

src/components/NewTagDesign/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+import blackCancleIcon from "./black-cancle-icon.svg";
+
+const NewTagDesign = ({
+  titleColor,
+  title,
+  tagBgColor,
+  tagBorderColor,
+  icon,
+  fontSize,
+  border,
+}) => {
+  return (
+    <button
+      className={`flex flex-row items-center rounded px-2 py-0.5 ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
+    >
+      {title}
+      {icon && <img src={icon} alt="" className="mr-5 w-2.5" />}
+    </button>
+  );
+};
+
+export default NewTagDesign;
+
+NewTagDesign.defaultProps = {
+  title: "کتاب",
+  titleColor: "text-blue-600",
+  tagBgColor: "bg-blue-300 bg-opacity-10",
+  border: "border-2",
+  tagBorderColor: "border-blue-600",
+  fontSize: "text-xs",
+  // for icons
+  icon: blackCancleIcon,
+};