update App.js, src/components/FormInput/index.js and src/index.scss

master
mahdi 2 years ago
parent 9b4ca72c73
commit a485b42b81
  1. 2
      src/App.js
  2. 22
      src/components/CustomSelectBox/index.js
  3. 15
      src/components/FormInput/index.js
  4. 2
      src/index.scss

@ -272,7 +272,7 @@ function App() {
{/* <LeafletMap /> */} {/* <LeafletMap /> */}
{/* <Digikala /> */} {/* <Digikala /> */}
<TestComponentNew /> {/* <TestComponentNew /> */}
</div> </div>
</Provider> </Provider>
); );

@ -0,0 +1,22 @@
import React from "react";
const CustomSelectBox = ({ options }) => {
return (
<select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
{options.map((option, index) => (
<option key={index}>{option.title}</option>
))}
</select>
);
};
export default CustomSelectBox;
CustomSelectBox.defaultProps = {
options: [
{ title: "میزان تحصیلات" },
{ title: "کارشناسی" },
{ title: "ارشد" },
{ title: "دکتری" },
],
};

@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
import DateRangePicker from "../DateRangePicker"; import DateRangePicker from "../DateRangePicker";
import Input from "../AnimatedInput/Input"; import Input from "../AnimatedInput/Input";
import CustomSelectBox from "../CustomSelectBox";
const FormInput = () => { const FormInput = () => {
const { register, getValues } = useForm(); const { register, getValues } = useForm();
@ -37,12 +38,7 @@ const FormInput = () => {
borderClassname={`border-transparent `} borderClassname={`border-transparent `}
className={``} className={``}
/> />
<select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent"> <CustomSelectBox />
<option>میزان تحصیلات</option>
<option>کارشناسی</option>
<option>ارشد</option>
<option>دکتری</option>
</select>{" "}
<Input <Input
register={register("gender")} register={register("gender")}
label="جنسیت" label="جنسیت"
@ -66,12 +62,7 @@ const FormInput = () => {
borderClassname={`border-transparent `} borderClassname={`border-transparent `}
className={``} className={``}
/> />
<select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent"> <CustomSelectBox />
<option>شهر مبدا</option>
<option>تهران</option>
<option>تهران</option>
<option>تهران</option>
</select>
<Input <Input
register={register("foundus")} register={register("foundus")}
label="نحوه آشنایی با موکب" label="نحوه آشنایی با موکب"

@ -46,7 +46,7 @@ l.leaflet-popup-content,
font-family: "iransans-medium" !important; font-family: "iransans-medium" !important;
} }
// class for selectbox // ? class for selectbox inside -->> CustomSelectBox <<--
.customizeSelect { .customizeSelect {
background-position: left 0.5rem center; background-position: left 0.5rem center;
padding-right: 1rem; padding-right: 1rem;

Loading…
Cancel
Save