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.
 
 
 

140 lines
4.3 KiB

import React from "react";
import ButtonNewDesign from "../ButtonNewDesign";
import CircleInCircle from "../CircleInCircle";
import NewTagDesign from "../NewTagDesign";
import profilePic1 from "./images/profilePic1.svg";
import profilePic2 from "./images/profilePic2.svg";
import profilePic3 from "./images/profilePic3.svg";
import clock from "./images/clock.svg";
import nike from "./images/nike.svg";
import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
const CardTrelloDesign = ({ circle, pictures }) => {
return (
<div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
{/* top */}
<div className="flex flex-row justify-between items-center">
{/* right */}
{circle && (
<CircleInCircle
parentWidth={"w-5"}
parentHeight={"h-5"}
chidlWidth={"w-2"}
chidlHeight={"h-2"}
parentBg={"bg-[#FF000044]"}
childBg={"bg-[#FF0000]"}
/>
)}
{/* left */}
<div className="flex flex-row gap-x-1 items-center place-content-end">
<ButtonNewDesign
bgColor={"bg-[#FF0A3C]"}
bgHoverColor={"bg-transparent"}
border={"border-none"}
paddingX={"p-1"}
paddingY={"p-0.5"}
fontSize={"text-xs"}
borderRadius={"rounded-sm"}
icon={false}
text={"رابط کاربری"}
/>
<ButtonNewDesign
bgColor={"bg-[#0AABFF]"}
bgHoverColor={"bg-transparent"}
border={"border-none"}
paddingX={"p-1"}
paddingY={"p-0.5"}
fontSize={"text-xs"}
borderRadius={"rounded-sm"}
icon={false}
text={"فرانت اند"}
/>
<ButtonNewDesign
bgColor={"bg-[#C7FF0A]"}
bgHoverColor={"bg-transparent"}
border={"border-none"}
paddingX={"p-1"}
paddingY={"p-0.5"}
fontSize={"text-xs"}
borderRadius={"rounded-sm"}
icon={false}
text={"بک اند"}
/>
</div>
</div>
{/* middle */}
<p
style={{ color: "#00253A" }}
className="text-sm leading-6 text-justify mt-3"
>
طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
پروژه دانوین
</p>
{/* bottom */}
<div className="flex flex-row justify-between items-center mt-3">
{/* right */}
<div className="flex flex-row items-center gap-x-1">
{/* {pictures.map((pic, index) => (
<img src={pic.image} alt="" className="w-10" />
))} */}
<ProfilePicNextToEachOther num={3} marginLeft={"5px"} />
</div>
{/* left */}
<div className="flex flex-row items-center gap-x-1">
{/* comment Icon */}
<div className="flex flex-row items-center ml-1">
<span className="text-xs ml-0.5 text-[10px] text-[#707070]">10</span>
<img src={messageText} alt="comment-icon" className="w-5" />
</div>
<NewTagDesign
title="29 فروردین"
align={"flex-row-reverse"}
titleColor="text-[#007987]"
tagBgColor={"bg-[#06BACE33]"}
border={"border-none"}
borderRadius={"rounded-sm"}
iconWidth={"w-4"}
marginRight="mr-0"
marginLeft="ml-1"
icon={clock}
paddingY={"p-1"}
paddingX={"p-1"}
/>
<NewTagDesign
title="12 از 13"
align={"flex-row-reverse"}
titleColor="text-[#FFB300]"
tagBgColor={"bg-[#FFAA0033]"}
border={"border-none"}
borderRadius={"rounded-sm"}
iconWidth={"w-4"}
marginRight="mr-0"
marginLeft="ml-1"
icon={nike}
paddingY={"p-1"}
paddingX={"p-1"}
/>
</div>
</div>
</div>
);
};
export default CardTrelloDesign;
CardTrelloDesign.defaultProps = {
circle: true,
pictures: [
{
image: profilePic1,
},
{
image: profilePic2,
},
{
image: profilePic3,
},
],
};