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, +};