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 }) => {
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) => (
<option className="text-black" key={index}>
{option.title}

@ -19,7 +19,7 @@ const 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"}
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
`}
>
<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()}
>
<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}
icon={"images/white-cancel.svg"}
iconHolderClassName={"mr-0"}

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

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

Loading…
Cancel
Save