طرح جدید را اوکی کردم | 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,
icon,
text,
subTitle,
subTitleClass,
onClick,
sharpStyle,
clippath,
@ -19,6 +21,7 @@ const Button = ({
className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
>
{text}
{subTitle && <span className={`${subTitleClass} mr-1`}>{subTitle}</span>}
{icon && (
<span className={`${iconHolderClassName}`}>
<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",
text: "اطلاعات بیشتر",
subTitle: false,
subTitleClass: "text-sm",
iconHolderClassName: "bg-secondary mr-2",
iconClassName: "w-4",
icon: false,

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