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