ادامه کار | 22

master
mahdi andalib 2 years ago
parent 45e2b6c945
commit e8f62a62cb
  1. 6
      public/images/white-cancel.svg
  2. 41
      src/components/Card/index.js
  3. 43
      src/components/Modal/index.js

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.305" height="13.305" viewBox="0 0 13.305 13.305">
<g id="Group_2176" data-name="Group 2176" transform="translate(1.061 1.061)">
<path id="Vector" d="M11.072,11.072,0,0" transform="translate(0.112 0)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M11.072,0,0,11.072" transform="translate(0 0.112)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 555 B

@ -2,19 +2,15 @@ import React, { useState } from "react";
import Button from "../Button"; import Button from "../Button";
import CircleInCircle from "../CircleInCircle"; import CircleInCircle from "../CircleInCircle";
import Modal from "../Modal";
import FormInput from "../FormInput";
const ProcessCard = ({ processes, title, hint, buttons, options }) => { const ProcessCard = ({ processes, title, hint, buttons, options }) => {
const [openModal, setOpenModal] = useState(false);
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-white border border-gray-300 rounded-md mt-5">
{/* right */} {/* right */}
<div className="flex flex-1 flex-col justify-between"> <div className="flex flex-1 flex-col justify-between">
{/* top */} {/* top */}
<div className="flex items-center p-4 bg-[#EEFCE4] rounded divide-x-2 divide-[#C7C7C7] divide-x-reverse"> <div className="flex items-center p-4 bg-[#EEFCE4] divide-x-2 divide-[#C7C7C7] divide-x-reverse">
{processes.map((process, index) => ( {processes.map((process, index) => (
<div <div
className="flex flex-1 items-center justify-center flex-grow" className="flex flex-1 items-center justify-center flex-grow"
@ -32,7 +28,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
))} ))}
</div> </div>
{/* middle */} {/* middle */}
<div className="flex flex-col flex-1 justify-center items-center p-4 bg-white"> <div className="flex flex-col flex-1 justify-center items-center p-4">
<div className="w-[96%] flex flex-col justify-center gap-y-4"> <div className="w-[96%] flex flex-col justify-center gap-y-4">
<h2 className="text-xl font-bold text-[#046AE8]">{title}</h2> <h2 className="text-xl font-bold text-[#046AE8]">{title}</h2>
<p className="text-sm text-justify leading-6 text-[#00253A]"> <p className="text-sm text-justify leading-6 text-[#00253A]">
@ -42,6 +38,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
</div> </div>
{/* bottom */} {/* bottom */}
<div className="flex flex-row item-center justify-around p-3 bg-[#F8F8F8] rounded "> <div className="flex flex-row item-center justify-around p-3 bg-[#F8F8F8] rounded ">
<Modal />
{buttons.map((btn, index) => ( {buttons.map((btn, index) => (
<Button <Button
key={index} key={index}
@ -56,7 +53,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
</div> </div>
</div> </div>
{/* left */} {/* left */}
<div className="flex flex-col justify-center gap-y-4 p-2 bg-white border-r border-blue-400"> <div className="flex flex-col justify-center gap-y-4 p-2 border-r border-blue-400">
{options.map((option, j) => ( {options.map((option, j) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div <div
@ -73,27 +70,6 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
</div> </div>
))} ))}
</div> </div>
{/* modal */}
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
`}
>
<div
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-5"
onClick={(e) => e.stopPropagation()}
>
<Button
text={null}
icon={"images/blue-clock.svg"}
iconHolderClassName={""}
iconClassName={""}
className="p-2 bg-red-600 rounded self-end"
onClick={() => setOpenModal(false)}
/>
<FormInput />
</div>
</div>
</section> </section>
); );
}; };
@ -128,11 +104,6 @@ ProcessCard.defaultProps = {
], ],
buttons: [ buttons: [
{
title: "ویرایش",
className: "bg-[#046AE8] text-white",
icon: "images/blue-edit-icon.svg",
},
{ {
title: "سوالات:", title: "سوالات:",
className: "border border-[#046AE8] text-[#046AE8]", className: "border border-[#046AE8] text-[#046AE8]",

@ -0,0 +1,43 @@
import React, { useState } from "react";
import Button from "../Button";
import FormInput from "../FormInput";
const Modal = () => {
const [openModal, setOpenModal] = useState(false);
console.log(openModal);
return (
<div>
<Button
className={`bg-[#046AE8] text-white rounded-md px-2 py-2 text-sm`}
iconHolderClassName={"bg-transparent mr-1"}
iconClassName={"w-5"}
icon={"images/blue-edit-icon.svg"}
text={"ویرایش"}
onClick={() => setOpenModal(true)}
/>
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-60" : "opacity-0 pointer-events-none"}
`}
>
<div
className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm p-5"
onClick={(e) => e.stopPropagation()}
>
<Button
className="bg-[#D11B1B] w-fit p-1.5 rounded-sm self-end"
text={false}
icon={"images/white-cancel.svg"}
iconHolderClassName={"mr-0"}
/>
<FormInput />
</div>
</div>
</div>
);
};
export default Modal;
Loading…
Cancel
Save