From e48a28fca79912252214ac87860e418bd9e14694 Mon Sep 17 00:00:00 2001 From: sanwalsulehri Date: Thu, 30 Jan 2025 07:30:32 +0500 Subject: [PATCH 1/2] UI of Admission Page #61 solved --- src/App.jsx | 5 + .../admissionComponents/AdmissionForm.jsx | 43 +++ .../admissionComponents/AreyouHuman.jsx | 48 ++++ .../admissionComponents/DropDown.jsx | 117 ++++++++ .../admissionComponents/ErrorModal.jsx | 41 +++ src/components/admissionComponents/Grades.jsx | 108 ++++++++ .../admissionComponents/InputField.jsx | 52 ++++ .../admissionComponents/ParentsInfo.jsx | 91 +++++++ src/components/admissionComponents/Steps.jsx | 254 ++++++++++++++++++ .../admissionComponents/UniversityInfo.jsx | 75 ++++++ .../admissionComponents/YourInfo.jsx | 165 ++++++++++++ src/pages/Admission.jsx | 22 ++ 12 files changed, 1021 insertions(+) create mode 100644 src/components/admissionComponents/AdmissionForm.jsx create mode 100644 src/components/admissionComponents/AreyouHuman.jsx create mode 100644 src/components/admissionComponents/DropDown.jsx create mode 100644 src/components/admissionComponents/ErrorModal.jsx create mode 100644 src/components/admissionComponents/Grades.jsx create mode 100644 src/components/admissionComponents/InputField.jsx create mode 100644 src/components/admissionComponents/ParentsInfo.jsx create mode 100644 src/components/admissionComponents/Steps.jsx create mode 100644 src/components/admissionComponents/UniversityInfo.jsx create mode 100644 src/components/admissionComponents/YourInfo.jsx create mode 100644 src/pages/Admission.jsx diff --git a/src/App.jsx b/src/App.jsx index 44056e1..064f379 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,6 +11,7 @@ import Landing from './pages/Home'; import Student from './pages/Student'; import Album_Image from './pages/Album_Image'; import ContactUs from './components/ContactUs'; +import Admission from './pages/Admission'; const App = () => { return ( <> @@ -35,6 +36,10 @@ const App = () => { } + > + } > { + return ( +
+
+ + Note: + {' '} + Welcome to [Institute Name], an + institution dedicated to + fostering innovation, knowledge, + and personal growth. Our mission + is to shape tom +
+ +
+
+ Admission Form +
+ +
+

+ Current Status: +

+
+ + Note: + {' '} + Welcome to [Institute Name], + an institution dedicated to + fostering innovation, +
+ + +
+
+
+ ); +}; + +export default AdmissionForm; diff --git a/src/components/admissionComponents/AreyouHuman.jsx b/src/components/admissionComponents/AreyouHuman.jsx new file mode 100644 index 0000000..8c27d57 --- /dev/null +++ b/src/components/admissionComponents/AreyouHuman.jsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; + +const AreyouHuman = () => { + const [isHuman, setIsHuman] = + useState(false); + + const handleCheckboxChange = e => { + setIsHuman(e.target.checked); + }; + + return ( +
+

+ Are You Human? +

+

+ Please confirm that you are not + a robot by checking the box + below. +

+
+ + +
+ {isHuman && ( +

+ Thank you for confirming you + are human! +

+ )} +
+ ); +}; + +export default AreyouHuman; diff --git a/src/components/admissionComponents/DropDown.jsx b/src/components/admissionComponents/DropDown.jsx new file mode 100644 index 0000000..fbc14c2 --- /dev/null +++ b/src/components/admissionComponents/DropDown.jsx @@ -0,0 +1,117 @@ +import React, { useState } from 'react'; + +const Dropdown = ({ + placeholder, + options, + handleSelect, + isRequired = false, + errorMessage = 'This field is required.', +}) => { + const [ + selectedOption, + setSelectedOption, + ] = useState(placeholder); + const [isOpen, setIsOpen] = + useState(false); + const [isError, setIsError] = + useState(false); + + const validateDropdown = () => { + if ( + isRequired && + selectedOption === placeholder + ) { + setIsError(true); + } else { + setIsError(false); + } + }; + + const handleOptionClick = option => { + setSelectedOption(option); + setIsOpen(false); + setIsError(false); + if (handleSelect) + handleSelect(option); + }; + + const handleBlur = () => + validateDropdown(); + + return ( +
+
+ setIsOpen(!isOpen) + } + onBlur={handleBlur} + className={`border cursor-pointer w-full flex items-center justify-between gap-2 rounded-[8px] px-4 py-3 text-xs text-[#333333] ${ + isError + ? 'border-red-500' + : 'border-[#A0A0A080]' + }`} + > + {selectedOption} + + + +
+ + {isOpen && ( +
+ {options.map( + (option, index) => ( +
+ handleOptionClick( + option, + ) + } + className='flex items-center gap-2 px-4 py-3 text-xs text-[#333333] cursor-pointer hover:bg-[#FAFAFA]' + > +
+ {selectedOption === + option && ( +
+ )} +
+ {option} +
+ ), + )} +
+ )} + + {isError && ( +

+ {errorMessage} +

+ )} +
+ ); +}; + +export default Dropdown; diff --git a/src/components/admissionComponents/ErrorModal.jsx b/src/components/admissionComponents/ErrorModal.jsx new file mode 100644 index 0000000..46da702 --- /dev/null +++ b/src/components/admissionComponents/ErrorModal.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +const ErrorModal = ({ + message, + onClose, +}) => { + return ( +
+
+
+

+ Error +

+ +
+

+ {message} +

+
+
+ ); +}; + +export default ErrorModal; diff --git a/src/components/admissionComponents/Grades.jsx b/src/components/admissionComponents/Grades.jsx new file mode 100644 index 0000000..d455099 --- /dev/null +++ b/src/components/admissionComponents/Grades.jsx @@ -0,0 +1,108 @@ +import React from 'react'; +import InputField from './InputField'; +import Dropdown from './DropDown'; + +const Grades = ({ + handleInputChange, +}) => { + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; + +export default Grades; diff --git a/src/components/admissionComponents/InputField.jsx b/src/components/admissionComponents/InputField.jsx new file mode 100644 index 0000000..85a5681 --- /dev/null +++ b/src/components/admissionComponents/InputField.jsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; + +const InputField = ({ + placeholder, + type, +}) => { + const [value, setValue] = + useState(''); + const [isError, setIsError] = + useState(false); + + const handleChange = e => { + setValue(e.target.value); + setIsError(false); + }; + + const handleBlur = () => { + if (!value.trim()) { + setIsError(true); + } + }; + + const nameAndId = placeholder + .replace(/\s+/g, '') + .toLowerCase(); + + return ( +
+ + + {isError && ( +

{`${placeholder} is required.`}

+ )} +
+ ); +}; + +export default InputField; diff --git a/src/components/admissionComponents/ParentsInfo.jsx b/src/components/admissionComponents/ParentsInfo.jsx new file mode 100644 index 0000000..a8e235b --- /dev/null +++ b/src/components/admissionComponents/ParentsInfo.jsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import InputField from './InputField'; +import Dropdown from './DropDown'; + +const ParentsInfo = ({ + handleInputChange, +}) => { + const [activeBox, setActiveBox] = + useState(null); + + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default ParentsInfo; diff --git a/src/components/admissionComponents/Steps.jsx b/src/components/admissionComponents/Steps.jsx new file mode 100644 index 0000000..1ba030c --- /dev/null +++ b/src/components/admissionComponents/Steps.jsx @@ -0,0 +1,254 @@ +import React, { useState } from 'react'; +import YourInfo from './YourInfo'; +import ParentsInfo from './ParentsInfo'; +import AreyouHuman from './AreyouHuman'; +import Grades from './Grades'; +import UniversityInfo from './UniversityInfo'; + +const Steps = () => { + const [activeStep, setActiveStep] = + useState(0); + const [isLoading, setIsLoading] = + useState(false); + const [image, setImage] = + useState(null); + const [ + imageUploadSuccess, + setImageUploadSuccess, + ] = useState(false); + const [formData, setFormData] = + useState({}); + + const handleInputChange = e => { + const { name, value } = e.target; + setFormData(prevData => ({ + ...prevData, + [name]: value, + })); + }; + + const handleDropdownChange = ( + name, + value, + ) => { + setFormData(prevData => ({ + ...prevData, + [name]: value, + })); + }; + + const handleImageUpload = e => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setImage(reader.result); + setImageUploadSuccess(true); + }; + reader.readAsDataURL(file); + } + }; + + const steps = [ + { + label: 'Your Info', + component: ( + + ), + }, + { + label: 'Parents Info', + component: ( + + ), + }, + { + label: 'Are you Human?', + component: , + }, + { + label: 'Grades', + component: , + }, + { + label: 'University Info', + component: , + }, + ]; + + const validateStep = () => { + const currentStepData = + steps[activeStep]; + + if ( + currentStepData.component.props + ) { + const formFields = + Object.keys(formData); + + for (const field in formData) { + if (formData[field] === '') { + alert( + 'Please fill in all fields before proceeding!', + ); + return false; + } + } + + if (activeStep === 4 && !image) { + alert( + 'Please upload your image before proceeding!', + ); + return false; + } + } + return true; + }; + + const handleNext = () => { + if (validateStep()) { + if ( + activeStep < + steps.length - 1 + ) { + setActiveStep( + prevStep => prevStep + 1, + ); + } + } + }; + + const handlePrevious = () => { + if (activeStep > 0) { + setActiveStep( + prevStep => prevStep - 1, + ); + } + }; + + return ( + <> +
+
+ {steps.map((step, index) => ( + +
+
+ {step.label} +
+
+
+
+
+ {index < + steps.length - + 0 && ( +
+ )} +
+
+ + ))} +
+ + {steps[activeStep].component} + +
+
+

+ Picture Upload +

+

+ Submit Your Order + Information - Item Name, + Decoration Size, Quantity, + Due Date, and any other + details +

+
+ + + + + {imageUploadSuccess && + image && ( +
+

+ Upload successful! +

+ Uploaded +
+ )} +
+ +
+ {activeStep > 0 && ( + + )} + + +
+
+ + ); +}; + +export default Steps; diff --git a/src/components/admissionComponents/UniversityInfo.jsx b/src/components/admissionComponents/UniversityInfo.jsx new file mode 100644 index 0000000..0b6c4e2 --- /dev/null +++ b/src/components/admissionComponents/UniversityInfo.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import InputField from './InputField'; +import Dropdown from './DropDown'; + +const UniversityInfo = ({ + handleInputChange, +}) => { + return ( +
+ + + + + + + + + + + + + +
+ ); +}; + +export default UniversityInfo; diff --git a/src/components/admissionComponents/YourInfo.jsx b/src/components/admissionComponents/YourInfo.jsx new file mode 100644 index 0000000..a917ca5 --- /dev/null +++ b/src/components/admissionComponents/YourInfo.jsx @@ -0,0 +1,165 @@ +import React, { useState } from 'react'; +import InputField from './InputField'; +import Dropdown from './DropDown'; + +const YourInfo = ({ + formData, + handleInputChange, +}) => { + const [activeBox, setActiveBox] = + useState(null); + + return ( +
+ + + + + + + + + + + + + + + + {/* Tenth Marks */} +
+ setActiveBox('tenth') + } + > + Tenth Marks +
+
+ +
+ setActiveBox('twelfth') + } + > + Twelfth Marks +
+
+ + +
+ ); +}; + +export default YourInfo; diff --git a/src/pages/Admission.jsx b/src/pages/Admission.jsx new file mode 100644 index 0000000..b86d0cc --- /dev/null +++ b/src/pages/Admission.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Helmet } from 'react-helmet-async'; +import AdmissionForm from '../components/admissionComponents/AdmissionForm'; + +const Admission = () => { + return ( +
+ + + Admission - CIITM Dhanbad + + + + +
+ ); +}; + +export default Admission; From 0d0cef22b225cc70157f2111be0b4ccc65c4810b Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Thu, 30 Jan 2025 08:59:05 +0530 Subject: [PATCH 2/2] Import Admission from Pages --- src/App.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.jsx b/src/App.jsx index d49256a..cf00142 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -15,6 +15,7 @@ import Student from './pages/Student'; import Album_Image from './components/Album_Image_Components/Album_Image'; import ContactUs from './pages/ContactUs'; import Loader from './components/Loader'; +import Admission from './pages/Admission'; const App = () => { useEffect(() => {