diff --git a/src/App.js b/src/App.js
index 21a07f4..7789eec 100644
--- a/src/App.js
+++ b/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() {
{/* */}
{/* */}
{/* */}
- {/* */}
+
{/* */}
{/* */}
{/* */}
@@ -156,6 +157,7 @@ function App() {
{/* */}
{/* */}
+ {/* */}
);
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 08e6898..8141e95 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/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 }) => {
))}
{/* left */}
-
+
+
+
+
);
diff --git a/src/components/NewTagDesign/black-cancle-icon.svg b/src/components/NewTagDesign/black-cancle-icon.svg
new file mode 100644
index 0000000..a6539d7
--- /dev/null
+++ b/src/components/NewTagDesign/black-cancle-icon.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/components/NewTagDesign/index.js b/src/components/NewTagDesign/index.js
new file mode 100644
index 0000000..131127c
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+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,
+};