update App.js and src/components/CardTrelloDesign/index.js

master
mahdi andalib 2 years ago
parent 2a271fbd04
commit 608f71e723
  1. 8
      src/components/CardTrelloDesign/images/profilePic1.svg
  2. 8
      src/components/CardTrelloDesign/images/profilePic2.svg
  3. 8
      src/components/CardTrelloDesign/images/profilePic3.svg
  4. 8
      src/components/CardTrelloDesign/images/profilePic4.svg
  5. 8
      src/components/CardTrelloDesign/images/profilePic5.svg
  6. 58
      src/components/CardTrelloDesign/index.js

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 37 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 33 KiB

@ -2,27 +2,33 @@ import React from "react";
import ButtonNewDesign from "../ButtonNewDesign"; import ButtonNewDesign from "../ButtonNewDesign";
import CircleInCircle from "../CircleInCircle"; import CircleInCircle from "../CircleInCircle";
const CardTrelloDesign = () => { import profilePic1 from "./images/profilePic1.svg";
import profilePic2 from "./images/profilePic2.svg";
import profilePic3 from "./images/profilePic3.svg";
const CardTrelloDesign = ({ circle, pictures }) => {
return ( return (
<div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3"> <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
{/* top */} {/* top */}
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center">
{/* right */} {/* right */}
<CircleInCircle {circle && (
parentWidth={"w-6"} <CircleInCircle
parentHeight={"h-6"} parentWidth={"w-5"}
chidlWidth={"w-3"} parentHeight={"h-5"}
chidlHeight={"h-3"} chidlWidth={"w-2"}
parentBg={"bg-[#FF000044]"} chidlHeight={"h-2"}
childBg={"bg-[#FF0000]"} parentBg={"bg-[#FF000044]"}
/> childBg={"bg-[#FF0000]"}
/>
)}
{/* left */} {/* left */}
<div className="flex flex-row gap-x-1 items-center"> <div className="flex flex-row gap-x-1 items-center place-content-end">
<ButtonNewDesign <ButtonNewDesign
bgColor={"bg-[#FF0A3C]"} bgColor={"bg-[#FF0A3C]"}
bgHoverColor={"bg-transparent"} bgHoverColor={"bg-transparent"}
border={"border-none"} border={"border-none"}
padding={"p-2"} padding={"p-1.5"}
fontSize={"text-xs"} fontSize={"text-xs"}
borderRadius={"rounded-md"} borderRadius={"rounded-md"}
icon={false} icon={false}
@ -32,7 +38,7 @@ const CardTrelloDesign = () => {
bgColor={"bg-[#0AABFF]"} bgColor={"bg-[#0AABFF]"}
bgHoverColor={"bg-transparent"} bgHoverColor={"bg-transparent"}
border={"border-none"} border={"border-none"}
padding={"p-2"} padding={"p-1.5"}
fontSize={"text-xs"} fontSize={"text-xs"}
borderRadius={"rounded-md"} borderRadius={"rounded-md"}
icon={false} icon={false}
@ -42,7 +48,7 @@ const CardTrelloDesign = () => {
bgColor={"bg-[#C7FF0A]"} bgColor={"bg-[#C7FF0A]"}
bgHoverColor={"bg-transparent"} bgHoverColor={"bg-transparent"}
border={"border-none"} border={"border-none"}
padding={"p-2"} padding={"p-1.5"}
fontSize={"text-xs"} fontSize={"text-xs"}
borderRadius={"rounded-md"} borderRadius={"rounded-md"}
icon={false} icon={false}
@ -58,8 +64,34 @@ const CardTrelloDesign = () => {
طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
پروژه دانوین پروژه دانوین
</p> </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" />
))}
</div>
{/* left */}
<button>mahdi</button>
</div>
</div> </div>
); );
}; };
export default CardTrelloDesign; export default CardTrelloDesign;
CardTrelloDesign.defaultProps = {
circle: true,
pictures: [
{
image: profilePic1,
},
{
image: profilePic2,
},
{
image: profilePic3,
},
],
};

Loading…
Cancel
Save