Parent-teacher on checkbox
Arkadyuti Sarkar
parent
7edd783dcb
commit
085739d96d
|
|
@ -1,6 +1,6 @@
|
||||||
// https://management.beanstalkedu.com/items/school
|
// https://management.beanstalkedu.com/items/school
|
||||||
// import React from 'react';
|
// import React from 'react';
|
||||||
import { useId,useState, useEffect,useMemo } from 'react';
|
import {useId, useState, useEffect, useMemo} from 'react';
|
||||||
import Select from 'react-select'
|
import Select from 'react-select'
|
||||||
import countryList from 'react-select-country-list'
|
import countryList from 'react-select-country-list'
|
||||||
import 'react-phone-number-input/style.css'
|
import 'react-phone-number-input/style.css'
|
||||||
|
|
@ -10,139 +10,199 @@ import PhoneInput from 'react-phone-number-input'
|
||||||
import NavBar from '../components/NavBar';
|
import NavBar from '../components/NavBar';
|
||||||
// import { Inter } from 'next/font/google'
|
// import { Inter } from 'next/font/google'
|
||||||
|
|
||||||
export default function addUserForm (){
|
const typeParent = "parent"
|
||||||
const [countryValue, setCountryValue] = useState('')
|
|
||||||
const options = useMemo(() => countryList().getData(), [])
|
export default function addUserForm() {
|
||||||
const [phoneValue, setphoneValue] = useState()
|
const [allLanguage, setLanguage] = useState([
|
||||||
let [individualValue=true, setindividualValue] = useState()
|
{lang: "Assamese", value:false},
|
||||||
|
{lang: "Bengali", value:false},
|
||||||
|
{lang: "English", value:false},
|
||||||
|
{lang: "Hindi", value:false},
|
||||||
|
{lang: "telegu", value:false},
|
||||||
|
{lang: "Punjabi", value:false},
|
||||||
|
{lang: "malayalam", value:false},
|
||||||
|
{lang: "tamil", value:false},
|
||||||
|
{lang: "kannada", value:false},
|
||||||
|
{lang: "gujrati", value:false},
|
||||||
|
])
|
||||||
|
const [currentType, setCurrentType] = useState(typeParent)
|
||||||
|
const [countryValue, setCountryValue] = useState('')
|
||||||
|
const options = useMemo(() => countryList().getData(), [])
|
||||||
|
const [phoneValue, setphoneValue] = useState()
|
||||||
|
let [individualValue = true, setindividualValue] = useState()
|
||||||
|
|
||||||
// console.log(phoneValue)
|
// console.log(phoneValue)
|
||||||
const selectCountry = countryValue => {
|
const selectCountry = countryValue => {
|
||||||
setCountryValue(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)
|
||||||
|
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
// console.log(school);
|
||||||
|
|
||||||
|
const handleFormsubmit = async (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
const data = {
|
||||||
|
"status": "published",
|
||||||
|
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,
|
||||||
|
anual: event.target.anual,
|
||||||
}
|
}
|
||||||
|
const JSONdata = JSON.stringify(data)
|
||||||
const individual = (event) => {
|
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||||
// console.log(event.target.schoolID.value)
|
const options = {
|
||||||
|
method: 'POST',
|
||||||
setindividualValue(individualValue=false)
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSONdata,
|
||||||
}
|
}
|
||||||
const [school, setSchool] = useState(null);
|
const response = await fetch(endpoint, options)
|
||||||
useEffect(() => {
|
const result = await response.json()
|
||||||
fetch(`https://management.beanstalkedu.com/items/school`).
|
alert(`Is this your full name: ${result.data}`)
|
||||||
then(res => res.json())
|
}
|
||||||
.then(data => {
|
const handleOnLanguageChange = (e, v) => {
|
||||||
setSchool(data)
|
let idx = allLanguage.findIndex(o => o.lang === e.target.value);
|
||||||
|
let newAllLang = [...allLanguage]
|
||||||
})
|
newAllLang[idx].value = true
|
||||||
}, [])
|
|
||||||
// console.log(school);
|
|
||||||
|
|
||||||
const handleFormsubmit = async (event) => {
|
|
||||||
event.preventDefault()
|
if ([typeParent, "teacher"].includes(currentType)) {
|
||||||
const data = {
|
let counter = 0
|
||||||
"status":"published",
|
newAllLang.forEach((n, idx) => {
|
||||||
type: event.target.type.value,
|
if (n.value) {
|
||||||
name: event.target.name.value,
|
counter++
|
||||||
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,
|
|
||||||
anual: event.target.anual,
|
|
||||||
}
|
}
|
||||||
const JSONdata = JSON.stringify(data)
|
})
|
||||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
if (counter >= 2) {
|
||||||
const options = {
|
newAllLang.forEach((n, idx) => {
|
||||||
method: 'POST',
|
newAllLang[idx].disabled = true
|
||||||
headers: {
|
})
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSONdata,
|
|
||||||
}
|
|
||||||
const response = await fetch(endpoint, options)
|
|
||||||
const result = await response.json()
|
|
||||||
alert(`Is this your full name: ${result.data}`)
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
setLanguage(newAllLang)
|
||||||
|
}
|
||||||
|
const handleTypeOnChange = (e) => {
|
||||||
|
let newAllLang = [...allLanguage]
|
||||||
|
newAllLang.forEach((n, idx) => {
|
||||||
|
newAllLang[idx].value = false
|
||||||
|
newAllLang[idx].disabled = false
|
||||||
|
})
|
||||||
|
setLanguage(newAllLang)
|
||||||
|
setCurrentType(e.target.value)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<div>
|
<div>
|
||||||
<NavBar />
|
<NavBar/>
|
||||||
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
||||||
<div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
<div
|
||||||
<div className='flex flex-col justify-center place-items-center'>
|
className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
||||||
<img src="/img/2.svg" alt="" />
|
<div className='flex flex-col justify-center place-items-center'>
|
||||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
|
<img src="/img/2.svg" alt=""/>
|
||||||
</div>
|
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User
|
||||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
Registration Form</p>
|
||||||
<div className='flex flex-col w-full pt-4'>
|
</div>
|
||||||
<label htmlFor="class" className='text-xl font-bold'>Type</label>
|
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||||
<select name="type" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
<div className='flex flex-col w-full pt-4'>
|
||||||
<option value="parent" >Parent</option>
|
<label htmlFor="class" className='text-xl font-bold'>Type</label>
|
||||||
<option value="teacher">Teacher</option>
|
<select name="type"
|
||||||
<option value="coordinator">Coordinator</option>
|
onChange={handleTypeOnChange}
|
||||||
<option value="master">Master</option>
|
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||||
|
<option value={typeParent}>Parent</option>
|
||||||
|
<option value="teacher">Teacher</option>
|
||||||
|
<option value="coordinator">Coordinator</option>
|
||||||
|
<option value="master">Master</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="name" className='text-xl font-bold'> Name</label>
|
||||||
|
<input type="text" name="name"
|
||||||
|
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||||
|
placeholder='Enter your Name'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||||
|
<input type="email" name="email" placeholder='ex. xyz@email.com'
|
||||||
|
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||||
|
<Select
|
||||||
|
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||||
|
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||||
|
onChange={selectCountry}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||||
|
<PhoneInput
|
||||||
|
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||||
|
name="phone" placeholder="Enter phone number" value={phoneValue}
|
||||||
|
onChange={setphoneValue}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full pt-4'>
|
||||||
|
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||||
|
<select name="schoolID" onChange={individual}
|
||||||
|
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||||
|
<option value="individual"> individual</option>
|
||||||
|
{school && school.data.map(data =>
|
||||||
|
<option value={data.id} key={data.id}>{data.name}</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full pt-4'>
|
||||||
|
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||||
|
<select name="class"
|
||||||
|
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||||
|
<option value="0">-Select-</option>
|
||||||
|
<option value="IK1">IK1</option>
|
||||||
|
<option value="IK2">IK2</option>
|
||||||
|
<option value="IK3">IK3</option>
|
||||||
|
<option value="PG">PG</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{individualValue &&
|
||||||
|
<div>
|
||||||
|
<div className='flex flex-col w-full pt-4'>
|
||||||
|
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||||
|
<select name="anual"
|
||||||
|
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||||
|
<option value="0">-NA-</option>
|
||||||
|
<option value="January">January</option>
|
||||||
|
<option value="February">February</option>
|
||||||
|
<option value="March">March</option>
|
||||||
|
<option value="April">April</option>
|
||||||
|
<option value="May">May</option>
|
||||||
|
<option value="June">June</option>
|
||||||
|
<option value="July">July</option>
|
||||||
|
<option value="August">August</option>
|
||||||
|
<option value="September">September</option>
|
||||||
|
<option value="October">October</option>
|
||||||
|
<option value="November">November</option>
|
||||||
|
<option value="December">December</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex flex-col w-full'>
|
{/* <div className='flex flex-col w-full pt-4'>
|
||||||
<label htmlFor="name" className='text-xl font-bold'> Name</label>
|
|
||||||
<input type="text" name="name" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' placeholder='Enter your Name' />
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full'>
|
|
||||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
|
||||||
<input type="email" name="email" placeholder='ex. xyz@email.com' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full'>
|
|
||||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
|
||||||
<Select className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="country" instanceId={useId()} options={options} value={countryValue} onChange={selectCountry} />
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full'>
|
|
||||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
|
||||||
<PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full pt-4'>
|
|
||||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
|
||||||
<select name="schoolID" onChange={individual} className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
|
||||||
<option value="individual"> individual </option>
|
|
||||||
{school && school.data.map(data=>
|
|
||||||
<option value={data.id} key={data.id}>{data.name}</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full pt-4'>
|
|
||||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
|
||||||
<select name="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
|
||||||
<option value="0" >-Select-</option>
|
|
||||||
<option value="IK1">IK1</option>
|
|
||||||
<option value="IK2">IK2</option>
|
|
||||||
<option value="IK3">IK3</option>
|
|
||||||
<option value="PG">PG</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{ individualValue &&
|
|
||||||
<div>
|
|
||||||
<div className='flex flex-col w-full pt-4'>
|
|
||||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
|
||||||
<select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
|
||||||
<option value="0" >-NA-</option>
|
|
||||||
<option value="January">January</option>
|
|
||||||
<option value="February">February</option>
|
|
||||||
<option value="March">March</option>
|
|
||||||
<option value="April">April</option>
|
|
||||||
<option value="May">May</option>
|
|
||||||
<option value="June">June</option>
|
|
||||||
<option value="July">July</option>
|
|
||||||
<option value="August">August</option>
|
|
||||||
<option value="September">September</option>
|
|
||||||
<option value="October">October</option>
|
|
||||||
<option value="November">November</option>
|
|
||||||
<option value="December">December</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{/* <div className='flex flex-col w-full pt-4'>
|
|
||||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
|
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
|
||||||
<div className='flex flex-row place-items-center'>
|
<div className='flex flex-row place-items-center'>
|
||||||
|
|
@ -163,86 +223,64 @@ export default function addUserForm (){
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className='flex flex-col w-full pt-4'>
|
<div className='flex flex-col w-full pt-4'>
|
||||||
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
||||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
||||||
<div className=''>
|
{allLanguage && allLanguage.length && allLanguage.map(n => {
|
||||||
<label className='cursor-pointer' htmlFor="assamese">Assamese</label>
|
return (
|
||||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
<div key={n.lang} className=''>
|
||||||
</div>
|
<label className='cursor-pointer'
|
||||||
<div className=''>
|
htmlFor="assamese">{n.lang}</label>
|
||||||
<label className='cursor-pointer' htmlFor="bengali">Bengali</label>
|
<input type="checkbox" disabled={n.disabled} name="lang" value={n.lang} checked={n.value}
|
||||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
onChange={handleOnLanguageChange}
|
||||||
</div>
|
className='check-box'/>
|
||||||
<div className=''>
|
</div>
|
||||||
<label className='cursor-pointer' htmlFor="english">English</label>
|
)
|
||||||
<input type="checkbox" name="lang" value='English' className='check-box'/>
|
})}
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="hindi">Hindi</label>
|
|
||||||
<input type="checkbox" name="lang" value='Hindi' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="telegu">Telegu</label>
|
|
||||||
<input type="checkbox" name="lang" value='telegu' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>
|
|
||||||
<input type="checkbox" name="lang" value='Punjabi' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="malayalam">Malayalam</label>
|
|
||||||
<input type="checkbox" name="lang" value='malayalam' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="tamil">Tamil</label>
|
|
||||||
<input type="checkbox" name="lang" value='tamil' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="kannada">Kannada</label>
|
|
||||||
<input type="checkbox" name="lang" value='kannada' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
<div className=''>
|
|
||||||
<label className='cursor-pointer' htmlFor="gujrati">Gujrati</label>
|
|
||||||
<input type="checkbox" name="lang" value='gujrati' className='check-box'/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full pt-4'>
|
|
||||||
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
|
|
||||||
<select name="start_month" id="start_month" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
|
||||||
<option value="0" >-Select-</option>
|
|
||||||
<option value="January"> January</option>
|
|
||||||
<option value="February"> February</option>
|
|
||||||
<option value="March"> March</option>
|
|
||||||
<option value="April"> April</option>
|
|
||||||
<option value="May"> May</option>
|
|
||||||
<option value="June"> June</option>
|
|
||||||
<option value="July"> July</option>
|
|
||||||
<option value="August"> August</option>
|
|
||||||
<option value="September"> September</option>
|
|
||||||
<option value="November"> November</option>
|
|
||||||
<option value="December"> December</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full'>
|
|
||||||
<label htmlFor="start_date" className='text-xl font-bold pt-4'>Start Date</label>
|
|
||||||
<input type="date" name="start_date" id="start_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
||||||
</div>
|
|
||||||
<div className='flex flex-col w-full'>
|
|
||||||
<label htmlFor="end_date" className='text-xl font-bold pt-4'>Subscription Expiry Date.</label>
|
|
||||||
<input type="date" name="end_date" id="end_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
</div>
|
||||||
<div className='flex justify-center pt-8'>
|
<div className='flex flex-col w-full pt-4'>
|
||||||
<button type="submit" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Save</button>
|
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
|
||||||
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
|
<select name="start_month" id="start_month"
|
||||||
|
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||||
|
<option value="0">-Select-</option>
|
||||||
|
<option value="January"> January</option>
|
||||||
|
<option value="February"> February</option>
|
||||||
|
<option value="March"> March</option>
|
||||||
|
<option value="April"> April</option>
|
||||||
|
<option value="May"> May</option>
|
||||||
|
<option value="June"> June</option>
|
||||||
|
<option value="July"> July</option>
|
||||||
|
<option value="August"> August</option>
|
||||||
|
<option value="September"> September</option>
|
||||||
|
<option value="November"> November</option>
|
||||||
|
<option value="December"> December</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="start_date" className='text-xl font-bold pt-4'>Start
|
||||||
|
Date</label>
|
||||||
|
<input type="date" name="start_date" id="start_date"
|
||||||
|
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<label htmlFor="end_date" className='text-xl font-bold pt-4'>Subscription Expiry
|
||||||
|
Date.</label>
|
||||||
|
<input type="date" name="end_date" id="end_date"
|
||||||
|
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
}
|
||||||
</div>
|
<div className='flex justify-center pt-8'>
|
||||||
|
<button type="submit"
|
||||||
|
className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Save
|
||||||
|
</button>
|
||||||
|
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue