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.
150 lines
4.1 KiB
150 lines
4.1 KiB
3 years ago
|
import React from "react";
|
||
3 years ago
|
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";
|
||
3 years ago
|
|
||
3 years ago
|
const CardTrelloDesign = ({
|
||
|
circle,
|
||
|
commnets,
|
||
|
buttons,
|
||
|
tags,
|
||
|
showBtn,
|
||
|
showTag,
|
||
|
emptyCards,
|
||
|
showEmptyCards,
|
||
|
}) => {
|
||
3 years ago
|
return (
|
||
3 years ago
|
<div className="max-w-[400px] mx-auto bg-white mt-10 rounded-md shadow p-3">
|
||
3 years ago
|
{/* top */}
|
||
3 years ago
|
<div
|
||
|
className={`flex justify-between items-center ${
|
||
|
circle === false ? "flex-row-reverse" : "flex-row"
|
||
|
}`}
|
||
3 years ago
|
// style={{direction: circle === false ? "ltr" : "rtl"}}
|
||
3 years ago
|
>
|
||
3 years ago
|
{/* right */}
|
||
3 years ago
|
{circle && (
|
||
|
<CircleInCircle
|
||
3 years ago
|
parentClassName={"bg-[#FF000044]"}
|
||
|
childClassName={"bg-[#FF0000]"}
|
||
3 years ago
|
/>
|
||
|
)}
|
||
3 years ago
|
{/* left */}
|
||
3 years ago
|
<div className="flex flex-row gap-x-1 items-center place-content-end">
|
||
3 years ago
|
{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>
|
||
|
))}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
</div>
|
||
3 years ago
|
{/* middle */}
|
||
3 years ago
|
<p className="text-sm leading-6 text-justify mt-3 text-[#00253A]">
|
||
3 years ago
|
طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
|
||
|
پروژه دانوین
|
||
|
</p>
|
||
3 years ago
|
{/* bottom */}
|
||
|
<div className="flex flex-row justify-between items-center mt-3">
|
||
|
{/* right */}
|
||
|
<div className="flex flex-row items-center gap-x-1">
|
||
3 years ago
|
<ProfilePicNextToEachOther num={3} />
|
||
3 years ago
|
</div>
|
||
|
{/* left */}
|
||
3 years ago
|
<div className="flex flex-row items-center gap-x-1">
|
||
3 years ago
|
{/* comment Icon */}
|
||
3 years ago
|
{commnets && (
|
||
3 years ago
|
<div class="flex flex-row items-center ml-1">
|
||
3 years ago
|
<span className="text-xs ml-0.5 text-[10px] text-[#707070]">
|
||
|
10
|
||
|
</span>
|
||
3 years ago
|
<CommentIcon
|
||
3 years ago
|
icon="images/CardTrelloDesignmessage-text.svg"
|
||
3 years ago
|
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"
|
||
|
/>
|
||
3 years ago
|
</div>
|
||
3 years ago
|
)}
|
||
3 years ago
|
{showTag &&
|
||
|
tags.map((tag) => (
|
||
3 years ago
|
<TagDesign1
|
||
3 years ago
|
title={tag.title}
|
||
3 years ago
|
tagClassName={`flex-row-reverse rounded-sm p-1 text-xs ${tag.className}`}
|
||
|
iconClassName={"w-4 mr-0 ml-1"}
|
||
3 years ago
|
icon={tag.icon}
|
||
|
/>
|
||
|
))}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
</div>
|
||
3 years ago
|
{/* progressBar */}
|
||
3 years ago
|
<AnimatedProgressBar1
|
||
3 years ago
|
rangeWidth={"10%"}
|
||
3 years ago
|
parentBg={"bg-[#E3E3E3] ltr mt-3"}
|
||
3 years ago
|
childBg={"bg-[#06BACE]"}
|
||
|
/>
|
||
3 years ago
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default CardTrelloDesign;
|
||
3 years ago
|
|
||
|
CardTrelloDesign.defaultProps = {
|
||
|
circle: true,
|
||
3 years ago
|
commnets: true,
|
||
3 years ago
|
|
||
|
showBtn: true,
|
||
3 years ago
|
buttons: [
|
||
3 years ago
|
{
|
||
3 years ago
|
name: "رابط کاربری",
|
||
3 years ago
|
className: "bg-[#0000ff55]",
|
||
3 years ago
|
},
|
||
|
{
|
||
3 years ago
|
name: "فرانت اند",
|
||
3 years ago
|
className: "bg-[#00ff00]",
|
||
3 years ago
|
},
|
||
|
{
|
||
|
name: "بک اند",
|
||
3 years ago
|
className: "bg-[#ff0000]",
|
||
|
},
|
||
|
],
|
||
3 years ago
|
|
||
3 years ago
|
showTag: true,
|
||
3 years ago
|
tags: [
|
||
|
{
|
||
3 years ago
|
title: "29 فروردین",
|
||
3 years ago
|
className: "text-[#007987] bg-[#06BACE33]",
|
||
3 years ago
|
icon: "images/CardTrelloDesignclock.svg",
|
||
3 years ago
|
},
|
||
|
{
|
||
3 years ago
|
title: "12 از 13",
|
||
3 years ago
|
className: "text-[#FFAA00] bg-[#FFAA0033]",
|
||
3 years ago
|
icon: "images/CardTrelloDesignnike.svg",
|
||
3 years ago
|
},
|
||
3 years ago
|
],
|
||
3 years ago
|
|
||
3 years ago
|
showEmptyCards: false,
|
||
3 years ago
|
emptyCards: [
|
||
|
{
|
||
3 years ago
|
backgroundColor: "bg-[#FF0A3C]",
|
||
3 years ago
|
},
|
||
|
{
|
||
3 years ago
|
backgroundColor: "bg-[#0AABFF]",
|
||
3 years ago
|
},
|
||
|
{
|
||
3 years ago
|
backgroundColor: "bg-[#C7FF0A]",
|
||
3 years ago
|
},
|
||
3 years ago
|
],
|
||
3 years ago
|
};
|