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

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