update 4 files and delete 2 files ادامه کار

master
mahdi andalib 2 years ago
parent a372083e77
commit 5027ead5eb
  1. 2
      src/components/CustomSelectBox/index.js
  2. 33
      src/components/FormInput/index.js
  3. 3
      src/components/Modal/index.js
  4. 7
      src/components/Popup/index.js
  5. 5
      src/components/Tabbar/index.js
  6. 23
      src/components/Tavabee/index.js
  7. 6
      src/index.scss

@ -2,7 +2,7 @@ import React from "react";
const CustomSelectBox = ({ options }) => { const CustomSelectBox = ({ options }) => {
return ( return (
<select className="customizeSelect rounded text-xs text-black py-2 bg-gray-200 focus:bg-white border-gray-200 focus:border-[#2483E1] focus:ring-transparent"> <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">
{options.map((option, index) => ( {options.map((option, index) => (
<option className="text-black" key={index}> <option className="text-black" key={index}>
{option.title} {option.title}

@ -1,33 +0,0 @@
// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const FormInput = ({ items }) => {
return (
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse ">
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<CustomSelectBox />
</div>
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<CustomSelectBox />
</div>
</div>
);
};
export default FormInput;
FormInput.defaultProps = {
items: [
{
title: "mahdi",
},
{
title: "mahdi",
},
{
title: "mahdi",
},
],
};

@ -2,7 +2,6 @@ import React, { useState } from "react";
import Button from "../Button"; import Button from "../Button";
import Tabbar from "../Tabbar"; import Tabbar from "../Tabbar";
import FormInput from "../FormInput";
const Modal = () => { const Modal = () => {
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
@ -39,7 +38,7 @@ const Modal = () => {
</div> </div>
<div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]"> <div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]">
<Button <Button
className="w-fit p-2 bg-[#3C58EA] text-white rounded-md" className="w-fit p-2 bg-[#3C58EA] text-white rounded-md text-sm"
text={"ذخیره و ثبت اطلاعات"} text={"ذخیره و ثبت اطلاعات"}
iconHolderClassName={"mr-0"} iconHolderClassName={"mr-0"}
/> />

@ -1,7 +0,0 @@
import React from "react";
const Popup = () => {
return <div>Popup</div>;
};
export default Popup;

@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Button from "../Button"; import Button from "../Button";
import Tavabee from "../Tavabee";
const Tabbar = ({ tabs }) => { const Tabbar = ({ tabs }) => {
const [activeTab, setActiveTab] = useState(); const [activeTab, setActiveTab] = useState();
@ -37,8 +38,8 @@ 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: "mahdi", components: <Tavabee />,
bg: "bg-blue-500", bg: "bg-transparent",
}, },
{ {
title: "سوالات", title: "سوالات",

@ -0,0 +1,23 @@
import React from "react";
import CustomSelectBox from "../CustomSelectBox";
const Tavabee = () => {
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">
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p>
<div className="flex flex-col gap-y-7">
<CustomSelectBox /> <CustomSelectBox />
</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>
<div className="flex flex-col gap-y-7">
<CustomSelectBox /> <CustomSelectBox />
</div>
</div>
</div>
);
};
export default Tavabee;

@ -25,3 +25,9 @@ body {
.ltr { .ltr {
direction: ltr; direction: ltr;
} }
// ? class for selectbox inside -->> CustomSelectBox <<--
.customizeSelect {
background-position: left 0.5rem center;
padding-right: 1rem;
}

Loading…
Cancel
Save