Job posting UI created

frontend/src/Component/Applied Jobs/AppliedJobs.js

+import React from 'react'
+
+function AppliedJobs() {
+  return (
+    <div>AppliedJobs</div>
+  )
+}
+
+export default AppliedJobs
\ No newline at end of file

frontend/src/Component/Job Posting/JobPosting.css

+.form-jobPosting {
+    background-color: white;
+    padding: 10px 20px 10px 20px;
+    border-radius: 5px;
+}
+.jobPosting {
+    width: 100%;
+}
+
+.form-group {
+    padding-top: 10px;
+}
+
+.placeholderValue {
+    color: red;
+}
\ No newline at end of file

frontend/src/Component/Job Posting/JobPosting.js

+import React, {useState} from 'react'
+import DatePicker from "react-datepicker";
+import ReactQuill from "react-quill";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-quill/dist/quill.snow.css";
+import './JobPosting.css'
+
+function JobPosting() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [responsibilities, setResponsibilities] = useState("");
+  const [qualifications, setQualifications] = useState("");
+  const [aboutJob, setAboutJob] = useState("");
+
+  return (
+    <div className="jobPosting">
+      <form className="form-jobPosting">
+        <div className="form-group">
+          <label htmlFor="jobTitle">Job Title</label>
+          <input type="text" className="form-control" id="jobTitle" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="companyName">Company Name</label>
+          <select className="form-control" id="companyName">
+            <option value="" disabled selected>
+              Select Company
+            </option>
+            <option value="company1">Company 1</option>
+            <option value="company2">Company 2</option>
+          </select>
+        </div>
+        <div className="form-group">
+          <label htmlFor="location">Location</label>
+          <select className="form-control" id="location">
+            <option value="" disabled selected>
+              Select location
+            </option>
+            <option value="location1">Location 1</option>
+            <option value="location2">Location 2</option>
+          </select>
+        </div>
+        <div className="d-flex">
+          <div className="form-group col-md-6">
+            <label htmlFor="workType">Work Type</label>
+            <select className="form-control" id="workType">
+              <option value="" disabled selected>
+                Select work type
+              </option>
+              <option value="workType1">Work Type 1</option>
+              <option value="workType2">Work Type 2</option>
+            </select>
+          </div>
+          <div className="form-group col-md-6" style={{ paddingLeft: "5px" }}>
+            <label htmlFor="term">Term</label>
+            <select className="form-control" id="term">
+              <option value="" disabled selected>
+                Select term
+              </option>
+              <option value="term1">Term 1</option>
+              <option value="term2">Term 2</option>
+            </select>
+          </div>
+        </div>
+        <div className="d-flex">
+          <div className="form-group col-md-6">
+            <label htmlFor="salary">Salary</label>
+            <input type="number" className="form-control" id="salary" />
+          </div>
+          <div className="form-group col-md-6" style={{ paddingLeft: "5px" }}>
+            <label htmlFor="duration">Duration</label>
+            <select className="form-control" id="duration">
+              <option value="" disabled selected>
+                Select duration
+              </option>
+              <option value="duration1">Duration 1</option>
+              <option value="duration2">Duration 2</option>
+            </select>
+          </div>
+        </div>
+        <div className="d-flex">
+          <div className="form-group col-md-5">
+            <label htmlFor="deadline">Deadline</label>
+            <div>
+              <DatePicker
+                className="form-control"
+                id="deadline"
+                selected={selectedDate}
+                onChange={(date) => setSelectedDate(date)}
+              />
+            </div>
+          </div>
+          <div
+            className="form-group col-md-6 d-flex relative m-auto"
+            style={{ marginLeft: "10px" }}
+          >
+            <label htmlFor="logo">Logo</label>
+            <input
+              type="file"
+              className="form-control-file"
+              id="logo"
+              accept="image/*"
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <label htmlFor="responsibilities">Key Responsibilities</label>
+          <ReactQuill
+            theme="snow"
+            value={responsibilities}
+            onChange={setResponsibilities}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="qualifications">Qualifications</label>
+          <ReactQuill
+            theme="snow"
+            value={qualifications}
+            onChange={setQualifications}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="aboutJob">About the Job</label>
+          <ReactQuill theme="snow" value={aboutJob} onChange={setAboutJob} />
+        </div>
+        <div style={{ paddingTop: "10px" }}>
+          <button className='btn btn-primary' type="submit">Post Job</button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default JobPosting
\ No newline at end of file

frontend/src/Component/Job Vacancies/JobVacancies.js

+import React from 'react'
+
+function JobVacancies() {
+  return (
+    <div>JobVacancies</div>
+  )
+}
+
+export default JobVacancies
\ No newline at end of file

frontend/src/Component/Posted Jobs/PostedJob.js

+import React from 'react'
+
+function PostedJob() {
+  return (
+    <div>PostedJob</div>
+  )
+}
+
+export default PostedJob
\ No newline at end of file