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

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]",
},
],
};