diff --git a/package.json b/package.json index 916c3fa..bf9a88b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,9 @@ "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", + "react-phone-number-input": "^3.2.22", + "react-select": "^5.7.3", + "react-select-country-list": "^2.2.3", "tailwindcss": "3.3.2", "typescript": "5.0.4" } diff --git a/public/img/1.svg b/public/img/1.svg new file mode 100644 index 0000000..37e3500 --- /dev/null +++ b/public/img/1.svg @@ -0,0 +1 @@ + school \ No newline at end of file diff --git a/public/img/2.svg b/public/img/2.svg new file mode 100644 index 0000000..9a8378f --- /dev/null +++ b/public/img/2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/3.svg b/public/img/3.svg new file mode 100644 index 0000000..8052ccf --- /dev/null +++ b/public/img/3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/add-school-form.jsx b/src/pages/add-school-form.jsx index 61ac629..b6677bd 100644 --- a/src/pages/add-school-form.jsx +++ b/src/pages/add-school-form.jsx @@ -2,8 +2,20 @@ // import Image from 'next/image' import NavBar from '../components/NavBar' +import { useId,useState, useEffect,useMemo } from 'react'; +import Select from 'react-select' +import countryList from 'react-select-country-list' +import 'react-phone-number-input/style.css' +import PhoneInput from 'react-phone-number-input' export default function addSchoolForm() { + const [countryValue, setCountryValue] = useState('') + const options = useMemo(() => countryList().getData(), []) + const [phoneValue, setphoneValue] = useState() + // console.log(phoneValue) + const selectCountry = countryValue => { + setCountryValue(countryValue) + } const handleSubmit = async (event) => { event.preventDefault() const data = { @@ -14,12 +26,13 @@ export default function addSchoolForm() { toddlers: event.target.toddlers.value, early_start_programme: event.target.early_start_programme.value, interakto: event.target.interakto.value, - school_agreement: event.target.school_agreement, + // school_agreement: event.target.school_agreement, // school_contact_number : event.target.school_contact_number, // school_email_id : event.target.school_email_id, } const JSONdata = JSON.stringify(data) + console.log(data) const endpoint = 'https://management.beanstalkedu.com/items/school' const options = { method: 'POST', @@ -31,7 +44,8 @@ export default function addSchoolForm() { const response = await fetch(endpoint, options) const result = await response.json() - alert(`Is this your full name: ${result.data}`) + // alert(`Is this your full name: ${result.data}`) + alert(`School Saved`) } return (
@@ -40,7 +54,7 @@ export default function addSchoolForm() {
- school +

School Registration Form

@@ -49,21 +63,21 @@ export default function addSchoolForm() {
- - -
-
- +
-
- - +
+ + - + @@ -81,7 +95,7 @@ export default function addSchoolForm() {
- + - - + @@ -137,8 +150,8 @@ export default function addSchoolForm() {
- - {/* */} + {/* */} +
diff --git a/src/pages/add-user-form.jsx b/src/pages/add-user-form.jsx index 328cc7a..44a11f1 100644 --- a/src/pages/add-user-form.jsx +++ b/src/pages/add-user-form.jsx @@ -1,27 +1,57 @@ // https://management.beanstalkedu.com/items/school // import React from 'react'; -import React, { useState, useEffect } from 'react'; +import { useId,useState, useEffect,useMemo } from 'react'; +import Select from 'react-select' +import countryList from 'react-select-country-list' +import 'react-phone-number-input/style.css' +import PhoneInput from 'react-phone-number-input' -import NavBar from '../components/NavBar' -import { type } from 'os'; -import { data } from 'autoprefixer'; + +import NavBar from '../components/NavBar'; // import { Inter } from 'next/font/google' -export default function addUserForm (){ - const [school, setSchool] = useState(""); +export default function addUserForm (){ + const [countryValue, setCountryValue] = useState('') + const options = useMemo(() => countryList().getData(), []) + const [phoneValue, setphoneValue] = useState() + let [individualValue=true, setindividualValue] = useState() + +// console.log(phoneValue) + const selectCountry = countryValue => { + setCountryValue(countryValue) + } + + const individual = (event) => { + // console.log(event.target.schoolID.value) + + setindividualValue(individualValue=false) + } + const [school, setSchool] = useState(null); useEffect(() => { fetch(`https://management.beanstalkedu.com/items/school`). then(res => res.json()) .then(data => { - setSchool(data.data[0]) + setSchool(data) + }) }, []) -// console.log(school); + // console.log(school); + const handleFormsubmit = async (event) => { event.preventDefault() const data = { "status":"published", - user: event.target.user.value, + type: event.target.type.value, + name: event.target.name.value, + user: event.target.email.value, + country: event.target.country.value, + phone: event.target.phone.value, + school: event.target.schoolID.value, + class: event.target.class.value, + lang: event.target.lang.value, + start_month: event.target.start_month.value, + start_date: event.target.start_date.value, + end_date: event.target.end_date.value, // user: event.target.user.value, } const JSONdata = JSON.stringify(data) @@ -44,165 +74,158 @@ export default function addUserForm (){
- +

User Registration Form

-
- - -
+ +
+ + +
+
+ + +
+
+ + +
+
+ + - {/* {school.map(data=> - - )} */} - +
- {/*
- - -
*/} -
- - -
-
- - -
-
- - -
-
- -
-
-   - + { individualValue && +
+
+ +
-
-   - -
-
-   - -
-
-   - -
- -
-
- {/*
- - -
*/} -
- -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - +
+ +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+ +
+ +
+ +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+
+   + +
+ +
-
- {/* */} -
-
- - -
-
- - -
-
- - +
+
+ + +
+
+ + +
+
+ + +
+ + }
- + {/* */}
diff --git a/src/pages/countrySelector.jsx b/src/pages/countrySelector.jsx new file mode 100644 index 0000000..1795bf7 --- /dev/null +++ b/src/pages/countrySelector.jsx @@ -0,0 +1,16 @@ +import React, { useState, useMemo } from 'react' +import Select from 'react-select' +import countryList from 'react-select-country-list' + +function CountrySelector() { + const [value, setValue] = useState('') + const options = useMemo(() => countryList().getData(), []) + + const changeHandler = value => { + setValue(value) + } + + return