You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.1 KiB
149 lines
4.1 KiB
import React from "react"; |
|
import Button from "../../ButtonDesign/Button"; |
|
import CircleInCircle from "../../CircleInCircle"; |
|
import TagDesign1 from "../../Tag/TagDesign1"; |
|
import AnimatedProgressBar1 from "../../ProgressBar/AnimatedProgressbar1"; |
|
import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther"; |
|
import CommentIcon from "../../MiniComponents/CommentIcon"; |
|
|
|
const CardTrelloDesign = ({ |
|
circle, |
|
commnets, |
|
buttons, |
|
tags, |
|
showBtn, |
|
showTag, |
|
emptyCards, |
|
showEmptyCards, |
|
}) => { |
|
return ( |
|
<div className="max-w-[400px] mx-auto bg-white mt-10 rounded-md shadow p-3"> |
|
{/* top */} |
|
<div |
|
className={`flex justify-between items-center ${ |
|
circle === false ? "flex-row-reverse" : "flex-row" |
|
}`} |
|
// style={{direction: circle === false ? "ltr" : "rtl"}} |
|
> |
|
{/* right */} |
|
{circle && ( |
|
<CircleInCircle |
|
parentClassName={"bg-[#FF000044]"} |
|
childClassName={"bg-[#FF0000]"} |
|
/> |
|
)} |
|
{/* left */} |
|
<div className="flex flex-row gap-x-1 items-center place-content-end"> |
|
{showBtn && |
|
buttons.map((btn) => ( |
|
<Button |
|
className={`${btn.className} border-none px-1 py-0.5 text-xs rounded-sm text-white`} |
|
text={btn.name} |
|
/> |
|
))} |
|
{showEmptyCards && |
|
emptyCards.map((card, idx) => ( |
|
<div |
|
key={idx} |
|
className={`w-5 h-1.5 rounded ${card.backgroundColor}`} |
|
></div> |
|
))} |
|
</div> |
|
</div> |
|
{/* middle */} |
|
<p className="text-sm leading-6 text-justify mt-3 text-[#00253A]"> |
|
طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی |
|
پروژه دانوین |
|
</p> |
|
{/* bottom */} |
|
<div className="flex flex-row justify-between items-center mt-3"> |
|
{/* right */} |
|
<div className="flex flex-row items-center gap-x-1"> |
|
<ProfilePicNextToEachOther num={3} /> |
|
</div> |
|
{/* left */} |
|
<div className="flex flex-row items-center gap-x-1"> |
|
{/* comment Icon */} |
|
{commnets && ( |
|
<div class="flex flex-row items-center ml-1"> |
|
<span className="text-xs ml-0.5 text-[10px] text-[#707070]"> |
|
10 |
|
</span> |
|
<CommentIcon |
|
icon="images/CardTrelloDesignmessage-text.svg" |
|
commentClassName="w-5" |
|
commentNum={false} |
|
className="w-2.5 h-2.5 bg-[#0AABFF] absolute top-0 left-0 transfrom -translate-x-0.5 border-white" |
|
/> |
|
</div> |
|
)} |
|
{showTag && |
|
tags.map((tag) => ( |
|
<TagDesign1 |
|
title={tag.title} |
|
tagClassName={`flex-row-reverse rounded-sm p-1 text-xs ${tag.className}`} |
|
iconClassName={"w-4 mr-0 ml-1"} |
|
icon={tag.icon} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
{/* progressBar */} |
|
<AnimatedProgressBar1 |
|
rangeWidth={"10%"} |
|
parentBg={"bg-[#E3E3E3] ltr mt-3"} |
|
childBg={"bg-[#06BACE]"} |
|
/> |
|
</div> |
|
); |
|
}; |
|
|
|
export default CardTrelloDesign; |
|
|
|
CardTrelloDesign.defaultProps = { |
|
circle: true, |
|
commnets: true, |
|
|
|
showBtn: true, |
|
buttons: [ |
|
{ |
|
name: "رابط کاربری", |
|
className: "bg-[#0000ff55]", |
|
}, |
|
{ |
|
name: "فرانت اند", |
|
className: "bg-[#00ff00]", |
|
}, |
|
{ |
|
name: "بک اند", |
|
className: "bg-[#ff0000]", |
|
}, |
|
], |
|
|
|
showTag: true, |
|
tags: [ |
|
{ |
|
title: "29 فروردین", |
|
className: "text-[#007987] bg-[#06BACE33]", |
|
icon: "images/CardTrelloDesignclock.svg", |
|
}, |
|
{ |
|
title: "12 از 13", |
|
className: "text-[#FFAA00] bg-[#FFAA0033]", |
|
icon: "images/CardTrelloDesignnike.svg", |
|
}, |
|
], |
|
|
|
showEmptyCards: false, |
|
emptyCards: [ |
|
{ |
|
backgroundColor: "bg-[#FF0A3C]", |
|
}, |
|
{ |
|
backgroundColor: "bg-[#0AABFF]", |
|
}, |
|
{ |
|
backgroundColor: "bg-[#C7FF0A]", |
|
}, |
|
], |
|
};
|
|
|