parent
							
								
									79f9f8d91a
								
							
						
					
					
						commit
						c158ba43c6
					
				
				 6 changed files with 127 additions and 8 deletions
			
			
		| @ -1,10 +1,10 @@ | ||||
| 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"; | ||||
| 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, | ||||
| @ -0,0 +1,90 @@ | ||||
| import React from "react"; | ||||
| import Button from "../../ButtonDesign/Button"; | ||||
| 
 | ||||
| const ProcessCard = ({ processes, title, hint, items }) => { | ||||
|   return ( | ||||
|     <section className="w-[600px] border border-gray-400 rounded"> | ||||
|       {/* right */} | ||||
|       <div className="flex flex-1 flex-col"> | ||||
|         {/* top */} | ||||
|         <div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-gray-300 divide-x-reverse"> | ||||
|           {processes.map((process, index) => ( | ||||
|             <div | ||||
|               className="flex flex-row flex-1 items-center justify-center flex-grow" | ||||
|               key={index} | ||||
|             > | ||||
|               {process.color && ( | ||||
|                 <div | ||||
|                   className={`w-1.5 h-5 rounded-sm ml-1.5 ${process.color}`} | ||||
|                 ></div> | ||||
|               )} | ||||
|               <p className="text-xs text-blue-900">{process.name}</p> | ||||
|               <span className="text-xs mr-2 text-blue-900"> | ||||
|                 {process.content} | ||||
|               </span> | ||||
|             </div> | ||||
|           ))} | ||||
|         </div> | ||||
|         {/* middle */} | ||||
|         <div className="flex flex-col p-4"> | ||||
|           <h2 className="text-lg text-blue-800 font-sansbold">{title}</h2> | ||||
|           <p className="text-sm text-justify leading-6 mt-3">{hint}</p> | ||||
|         </div> | ||||
|         {/* bottom */} | ||||
|         <div className="flex flex-row item-center justify-around p-4 bg-gray-200 rounded"> | ||||
|           {/* right */} | ||||
|           <Button | ||||
|             text={"ویرایش"} | ||||
|             icon={"images/white-cart-icon.svg"} | ||||
|             iconHolderClassName={""} | ||||
|             iconClassName={"mr-2 w-6"} | ||||
|             className="p-2 bg-blue-500 text-white text-sm rounded-md" | ||||
|           /> | ||||
|           {/* left */} | ||||
|           {items.map((item, i) => ( | ||||
|             <img src={item.icon} alt="" /> | ||||
|           ))} | ||||
|         </div> | ||||
|       </div> | ||||
|       {/* left */} | ||||
|     </section> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default ProcessCard; | ||||
| 
 | ||||
| ProcessCard.defaultProps = { | ||||
|   title: "پروسه مختلف در این قسمت قرار می گیرد", | ||||
|   hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.", | ||||
| 
 | ||||
|   processes: [ | ||||
|     { | ||||
|       color: "bg-red-600", | ||||
|       name: "فرایند اجرایی", | ||||
|       content: 256, | ||||
|     }, | ||||
|     { | ||||
|       color: false, | ||||
|       name: "وضعیت:", | ||||
|       content: "پرداخت شده", | ||||
|     }, | ||||
|     { | ||||
|       color: "bg-blue-600", | ||||
|       name: "در حال انجام", | ||||
|       content: 55, | ||||
|     }, | ||||
|     { | ||||
|       color: false, | ||||
|       name: "انجام شده", | ||||
|       content: 100, | ||||
|     }, | ||||
|   ], | ||||
| 
 | ||||
|   items: [ | ||||
|     { | ||||
|       icon: "images/user-edit.svg", | ||||
|       name: "سوالات", | ||||
|       ans: "5", | ||||
|     }, | ||||
|   ], | ||||
| }; | ||||
| @ -0,0 +1,27 @@ | ||||
| import React, { useState } from "react"; | ||||
| 
 | ||||
| import CardTrelloDesign from "./CardTrelloDesign"; | ||||
| import ProcessCard from "./ProcessCard"; | ||||
| 
 | ||||
| function CardDesgin() { | ||||
|   const list = { | ||||
|     1: <CardTrelloDesign />, | ||||
|     2: <ProcessCard />, | ||||
|   }; | ||||
|   const [type, setType] = useState(1); | ||||
|   return ( | ||||
|     <div className="w-full flex flex-col items-center"> | ||||
|       <select | ||||
|         className="mb-10 w-20 bg-gray-200" | ||||
|         onChange={(e) => setType(e.target.value)} | ||||
|       > | ||||
|         {Object.keys(list).map((option, index) => ( | ||||
|           <option key={index}>{option}</option> | ||||
|         ))} | ||||
|       </select> | ||||
|       {list[type]} | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| export default CardDesgin; | ||||
					Loading…
					
					
				
		Reference in new issue