mahdi
/
sameh
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

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

Browse Source
master
mahdi andalib 2 years ago
parent 5027ead5eb
commit f331ab5c80
5 changed files with 103 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

59
src/components/Condition/index.js
Unescape View File

@ -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
src/components/CustomSelectBox/index.js
Unescape View File

@ -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}

4
src/components/Modal/index.js
Unescape View File

@ -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"}

15
src/components/Tabbar/index.js
Unescape View File

@ -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",
},
],
};

36
src/components/Tavabee/index.js
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save