update src/components/CustomSelectBox/index.js, src/components/Modal/index.js, src/components/Tabbar/index.js and src/components/Tavabee/index.js ادامه کار

master
mahdi andalib 2 years ago
parent 5027ead5eb
commit f331ab5c80
  1. 59
      src/components/Condition/index.js
  2. 2
      src/components/CustomSelectBox/index.js
  3. 4
      src/components/Modal/index.js
  4. 15
      src/components/Tabbar/index.js
  5. 36
      src/components/Tavabee/index.js

@ -0,0 +1,59 @@
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const Condition = () => {
return (
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
<div className="flex-grow flex-1 flex flex-col pl-5 ">
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]">
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "}
</div>
</div>
<div className="flex-grow flex-1 flex flex-col pr-5">
<div className="flex flex-col gap-y-7">
<CustomSelectBox
options={[
{ title: "محدودیت شبکه" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title:
"شناسه فرآیندهایی که باعث ابطال وظایف با فرآیند های فعلی می شود",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title: "رفرنس هایی که شناسه ی آن ها ظروری است",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{
title: "رفرنس هایی که باید در یک گردش کار یکتا باشند",
},
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div>
</div>
</div>
);
};
export default Condition;

@ -2,7 +2,7 @@ import React from "react";
const CustomSelectBox = ({ options }) => { const CustomSelectBox = ({ options }) => {
return ( return (
<select className="customizeSelect rounded text-xs text-black font-bold py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent"> <select className="customizeSelect rounded text-xs text-[#00253A] py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
{options.map((option, index) => ( {options.map((option, index) => (
<option className="text-black" key={index}> <option className="text-black" key={index}>
{option.title} {option.title}

@ -19,7 +19,7 @@ const Modal = () => {
/> />
<div <div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all 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"} ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
`} `}
> >
<div className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm "> <div className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm ">
@ -28,7 +28,7 @@ const Modal = () => {
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<Button <Button
className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm" className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm mb-7"
text={false} text={false}
icon={"images/white-cancel.svg"} icon={"images/white-cancel.svg"}
iconHolderClassName={"mr-0"} iconHolderClassName={"mr-0"}

@ -1,12 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Button from "../Button"; import Button from "../Button";
import Condition from "../Condition";
import Tavabee from "../Tavabee"; import Tavabee from "../Tavabee";
const Tabbar = ({ tabs }) => { const Tabbar = ({ tabs }) => {
const [activeTab, setActiveTab] = useState(); const [activeTab, setActiveTab] = useState();
return ( return (
<div className="flex flex-col mt-7"> <div className="flex flex-col">
<div className="flex items-center"> <div className="flex items-center">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<Button <Button
@ -16,7 +17,7 @@ const Tabbar = ({ tabs }) => {
activeTab === tab activeTab === tab
? "bg-[#F1F3FF] text-[#3C58EA]" ? "bg-[#F1F3FF] text-[#3C58EA]"
: "bg-white text-[#333333]" : "bg-white text-[#333333]"
} w-full p-3 text-sm font-bold border border-b-2 border-t-2 border-[#3C58EA]`} } w-full p-3 text-sm border border-b-2 border-t-2 border-[#3C58EA]`}
icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""} icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
/> />
@ -38,7 +39,7 @@ Tabbar.defaultProps = {
{ {
title: "تنظیمات", title: "تنظیمات",
className: "rounded-tr-md rounded-br-md border-r-2", className: "rounded-tr-md rounded-br-md border-r-2",
components: <Tavabee />, components: "mahdiii",
bg: "bg-transparent", bg: "bg-transparent",
}, },
{ {
@ -62,14 +63,14 @@ Tabbar.defaultProps = {
{ {
title: "توابع", title: "توابع",
className: "", className: "",
components: "mahdiii", components: <Tavabee />,
bg: "bg-blue-500", bg: "bg-transparent",
}, },
{ {
title: "شرایط و اجرا", title: "شرایط و اجرا",
className: "rounded-tl-md rounded-bl-md border-l-2", className: "rounded-tl-md rounded-bl-md border-l-2",
components: "mahdiii", components: <Condition />,
bg: "bg-blue-500", bg: "bg-transparent",
}, },
], ],
}; };

@ -7,13 +7,43 @@ const Tavabee = () => {
<div className="flex-grow flex-1 flex flex-col pl-5"> <div className="flex-grow flex-1 flex flex-col pl-5">
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p> <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p>
<div className="flex flex-col gap-y-7"> <div className="flex flex-col gap-y-7">
<CustomSelectBox /> <CustomSelectBox /> <CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div> </div>
</div> </div>
<div className="flex-grow flex-1 flex flex-col pr-5"> <div className="flex-grow flex-1 flex flex-col pr-5">
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p> <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p>
<div className="flex flex-col gap-y-7"> <div className="flex flex-col gap-y-7">
<CustomSelectBox /> <CustomSelectBox /> <CustomSelectBox
options={[
{ title: "انتخاب سرویس" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
<CustomSelectBox
options={[
{ title: "انتخاب تابع" },
{ title: "شماره 1" },
{ title: "شماره 2" },
{ title: "شماره 3" },
]}
/>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save