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

master
mahdi andalib 2 years ago
parent 608f71e723
commit 69ecd9d0a5
  1. 4
      src/App.js
  2. 6
      src/components/CardTrelloDesign/index.js
  3. 8
      src/components/NewTagDesign/black-cancle-icon.svg
  4. 35
      src/components/NewTagDesign/index.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>
);

@ -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>
);

@ -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>

After

Width:  |  Height:  |  Size: 558 B

@ -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,
};
Loading…
Cancel
Save