update src/components/CardTrelloDesign/index.js

master
Your Name 2 years ago
parent cc8e8c6a6b
commit 51f87808e9
  1. 18
      src/components/CardTrelloDesign/index.js

@ -9,11 +9,11 @@ import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther"; import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
import AnimatedProgressBar from "../AnimatedProgressBar"; import AnimatedProgressBar from "../AnimatedProgressBar";
const CardTrelloDesign = ({ circle,commnets,buttons,tags, }) => { const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag }) => {
return ( return (
<div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3"> <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
{/* top */} {/* top */}
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center" style={{direction: circle === false ? "ltr" : "rtl"}}>
{/* right */} {/* right */}
{circle && ( {circle && (
<CircleInCircle <CircleInCircle
@ -27,7 +27,7 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags, }) => {
)} )}
{/* left */} {/* left */}
<div className="flex flex-row gap-x-1 items-center place-content-end"> <div className="flex flex-row gap-x-1 items-center place-content-end">
{buttons.map(btn=> <ButtonNewDesign {showBtn && buttons.map(btn=> <ButtonNewDesign
bgColor={`bg-[${btn.color}]`} bgColor={`bg-[${btn.color}]`}
bgHoverColor={"bg-transparent"} bgHoverColor={"bg-transparent"}
border={"border-none"} border={"border-none"}
@ -37,7 +37,8 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags, }) => {
borderRadius={"rounded-sm"} borderRadius={"rounded-sm"}
icon={false} icon={false}
text={btn.name} text={btn.name}
/>)} />
)}
</div> </div>
</div> </div>
{/* middle */} {/* middle */}
@ -63,7 +64,7 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags, }) => {
<img src={messageText} alt="comment-icon" className="w-5" /> <img src={messageText} alt="comment-icon" className="w-5" />
</div> </div>
)} )}
{tags.map(tag => {showTag && tags.map(tag =>
<NewTagDesign <NewTagDesign
title={tag.title} title={tag.title}
align={"flex-row-reverse"} align={"flex-row-reverse"}
@ -92,6 +93,8 @@ export default CardTrelloDesign;
CardTrelloDesign.defaultProps = { CardTrelloDesign.defaultProps = {
circle: true, circle: true,
commnets: true, commnets: true,
showBtn: true,
buttons: [ buttons: [
{ {
name: "رابط کاربری", name: "رابط کاربری",
@ -106,6 +109,8 @@ CardTrelloDesign.defaultProps = {
color: "#C7FF0A" color: "#C7FF0A"
} }
], ],
showTag:true,
tags: [ tags: [
{ {
title:"29 فروردین", title:"29 فروردین",
@ -119,6 +124,5 @@ CardTrelloDesign.defaultProps = {
bgColor: "#FFAA0033", bgColor: "#FFAA0033",
icon: nike icon: nike
}, },
] ],
}; };

Loading…
Cancel
Save