طرح جدید را اوکی کردم | 88

master
mahdi andalib 2 years ago
parent 3cef3a6ea9
commit 1b92e10a17
  1. 6
      src/components/Button/index.js
  2. 134
      src/components/Card/index.js
  3. 18
      src/components/CircleInCircle/index.js

@ -6,6 +6,8 @@ const Button = ({
iconHolderClassName, iconHolderClassName,
icon, icon,
text, text,
subTitle,
subTitleClass,
onClick, onClick,
sharpStyle, sharpStyle,
clippath, clippath,
@ -19,6 +21,7 @@ const Button = ({
className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`} className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
> >
{text} {text}
{subTitle && <span className={`${subTitleClass} mr-1`}>{subTitle}</span>}
{icon && ( {icon && (
<span className={`${iconHolderClassName}`}> <span className={`${iconHolderClassName}`}>
<img src={icon} alt="icon" className={`${iconClassName}`} /> <img src={icon} alt="icon" className={`${iconClassName}`} />
@ -35,6 +38,9 @@ Button.defaultProps = {
"bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90", "bg-primary text-primaryText hover:bg-primaryDark border border-b-4 border-primaryLight rounded text-sm px-4 py-4 hover:bg-opacity-90",
text: "اطلاعات بیشتر", text: "اطلاعات بیشتر",
subTitle: false,
subTitleClass: "text-sm",
iconHolderClassName: "bg-secondary mr-2", iconHolderClassName: "bg-secondary mr-2",
iconClassName: "w-4", iconClassName: "w-4",
icon: false, icon: false,

@ -1,83 +1,73 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Button from "../Button"; import Button from "../Button";
import CircleInCircle from "../CircleInCircle";
import ax from "../../assets/images/square.svg";
import FormInput from "../FormInput"; import FormInput from "../FormInput";
const ProcessCard = ({ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
processes,
title,
hint,
items,
options,
blogAuthorImg,
}) => {
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
console.log(openModal); console.log(openModal);
return ( return (
<section className="w-fit mx-auto flex flex-row bg-surface border border-blue-400 rounded"> <section className="w-fit mx-auto flex flex-row bg-surface border border-blue-400 rounded">
{/* right */} {/* right */}
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col justify-between">
{/* top */} {/* top */}
<div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-blue-400 divide-x-reverse"> <div className="flex flex-row p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse">
{processes.map((process, index) => ( {processes.map((process, index) => (
<div <div
className="flex flex-row flex-1 items-center justify-center flex-grow" className="flex flex-row flex-1 items-center justify-center flex-grow"
key={index} key={index}
> >
{process.color && ( {process.color && (
<div <CircleInCircle
className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`} parentClassName={`${process.color} w-3 h-3`}
></div> childClassName={false}
/>
// <div
// className={`w-1.5 h-5 rounded ml-1.5 ${process.color}`}
// ></div>
)} )}
<p className="text-xs bg-blue-400">{process.name}</p> <p className="text-xs mr-2">{process.name}</p>
<span className="text-xs mr-2 ">{process.content}</span> <span className="text-xs mr-1">{process.content}</span>
</div> </div>
))} ))}
</div> </div>
{/* middle */} {/* middle */}
<div className="flex flex-col p-4 my-5 mr-5"> <div className="flex flex-col justify-center flex-1 p-4 gap-y-4 bg-white">
<h2 className="text-lg font-bold">{title}</h2> <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
<p className="text-sm text-justify leading-6 mt-3">{hint}</p> <p className="text-sm text-justify leading-6 text-[#00253A]">
{hint}
</p>
</div> </div>
{/* bottom */} {/* bottom */}
<div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded "> <div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded ">
{/* right */} {buttons.map((btn, index) => (
<Button <Button
text={"ویرایش"} key={index}
icon={ax} className={`${btn.className} rounded-md px-2 py-2 text-sm`}
iconHolderClassName={""} iconHolderClassName={"bg-transparent mr-1"}
iconClassName={"mr-2 w-5"} iconClassName={"w-5"}
className="p-2 bg-primary text-white text-sm rounded" icon={btn.icon}
onClick={() => setOpenModal(true)} text={btn.title}
/> subTitle={btn.subTitle}
{/* left */} />
<div className="flex-1 flex flex-row items-center justify-around divide-x-2 divide-blue-400 divide-x-reverse"> ))}
{items.map((item, i) => (
<div
key={i}
className="flex flex-row flex-1 items-center justify-center flex-grow"
>
<img src={item.icon} alt="" className="w-4 h-4 ml-1" />
<p className="text-xs ">{item.name}</p>
<p className="text-xs mr-1 ">{item.ans}</p>
</div>
))}
</div>
</div> </div>
</div>{" "} </div>
<img src={blogAuthorImg} alt="author" className="w-8" />
{/* left */} {/* left */}
<div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4"> <div className="flex flex-col justify-center p-2 border-r border-blue-400 gap-y-4">
{options.map((option, j) => ( {options.map((option, j) => (
<div key={j} className="flex flex-row items-center justify-between"> <div
key={j}
className="flex flex-row gap-x-7 items-center justify-between"
>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img src={option.icon} alt="icon" className="w-5" /> <img src={option.icon} alt="icon" className="w-6" />
<p className="text-xs mr-1">{option.title}</p> <p className="text-xs mr-1.5 text-[#00253A]">{option.title}</p>
</div> </div>
<p className="text-xs mr-7">{option.content}</p> <p className="text-xs text-[#00253A]">{option.content}</p>
</div> </div>
))} ))}
</div> </div>
@ -93,7 +83,7 @@ const ProcessCard = ({
> >
<Button <Button
text={null} text={null}
icon={ax} icon={"images/blue-clock.svg"}
iconHolderClassName={""} iconHolderClassName={""}
iconClassName={""} iconClassName={""}
className="p-2 bg-red-600 rounded self-end" className="p-2 bg-red-600 rounded self-end"
@ -109,14 +99,12 @@ const ProcessCard = ({
export default ProcessCard; export default ProcessCard;
ProcessCard.defaultProps = { ProcessCard.defaultProps = {
blogAuthorImg: "images/blog-author.png",
title: "پروسه مختلف در این قسمت قرار می گیرد", title: "پروسه مختلف در این قسمت قرار می گیرد",
hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.", hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
processes: [ processes: [
{ {
color: "bg-error", color: "bg-[#51B708]",
name: "فرایند اجرایی", name: "فرایند اجرایی",
content: 256, content: 256,
}, },
@ -126,7 +114,7 @@ ProcessCard.defaultProps = {
content: "پرداخت شده", content: "پرداخت شده",
}, },
{ {
color: "bg-info", color: "bg-[#EE1010]",
name: "در حال انجام", name: "در حال انجام",
content: 55, content: 55,
}, },
@ -137,52 +125,60 @@ ProcessCard.defaultProps = {
}, },
], ],
items: [ buttons: [
{
title: "ویرایش",
className: "bg-[#046AE8] text-white",
icon: "images/blue-edit-icon.svg",
},
{ {
icon: ax, title: "سوالات:",
name: "سوالات:", className: "border border-[#046AE8] text-[#046AE8]",
ans: 5, subTitle: "5",
icon: "images/blue-thick-box.svg",
}, },
{ {
icon: ax, title: "چک لیست:",
name: "چک لیست:", className: "border border-[#046AE8] text-[#046AE8]",
ans: "تابع دارد", subTitle: "تابع دارد",
icon: "images/blue-thick-mark.svg",
}, },
{ {
icon: ax, title: "مکاتبات:",
name: "مکاتبات:", className: "border border-[#046AE8] text-[#046AE8]",
ans: "دارد", subTitle: "1",
icon: "images/blue-email.svg",
}, },
], ],
options: [ options: [
{ {
icon: "images/blog-author.png", icon: "images/blue-clock.svg",
title: "تاخیر", title: "تاخیر",
content: "5 ساعت", content: "5 ساعت",
}, },
{ {
icon: ax, icon: "images/blue-git-icon.svg",
title: "شرایط اجرا", title: "شرایط اجرا",
content: "2 مورد", content: "2 مورد",
}, },
{ {
icon: ax, icon: "images/blue-start-function.svg",
title: "تابع شروع", title: "تابع شروع",
content: "ندارد", content: "ندارد",
}, },
{ {
icon: ax, icon: "images/blue-return.svg",
title: ثلث", title: هلت",
content: "5 ساعت", content: "5 ساعت",
}, },
{ {
icon: ax, icon: "images/blue-thick-icon.svg",
title: "تایید خودکار", title: "تایید خودکار",
content: "5 ساعت", content: "5 ساعت",
}, },
{ {
icon: ax, icon: "images/blue-thick-clock.svg",
title: "تابع انجام", title: "تابع انجام",
content: "ندارد", content: "ندارد",
}, },

@ -0,0 +1,18 @@
import React from "react";
const CircleInCircle = ({ parentClassName, childClassName }) => {
return (
<div className={` ${parentClassName} w-5 h-5 rounded-full relative `}>
<div
className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}
></div>
</div>
);
};
export default CircleInCircle;
CircleInCircle.defaultProps = {
parentClassName: "bg-red-200",
childClassName: "bg-red-600",
};
Loading…
Cancel
Save