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 (
{/* top */}
{/* right */}
{circle && (
)}
{/* left */}
{showBtn &&
buttons.map((btn) => (
))}
{showEmptyCards &&
emptyCards.map((card, idx) => (
))}
{/* middle */}
طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
پروژه دانوین
{/* bottom */}
{/* right */}
{/* left */}
{/* comment Icon */}
{commnets && (
10
)}
{showTag &&
tags.map((tag) => (
))}
{/* progressBar */}
);
};
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]",
},
],
};