Use reuseable form input in hire me modal

Author: realstoman

src/components/HireMeModal.vue

@@ -1,9 +1,10 @@
 <script>
 import feather from 'feather-icons';
 import Button from './reusable/Button.vue';
+import FormInput from './reusable/FormInput.vue';
 export default {
 	props: ['showModal', 'modal', 'categories'],
-	components: { Button },
+	components: { Button, FormInput },
 	data() {
 		return {};
 	},
@@ -36,13 +37,13 @@ export default {
 						class="modal-wrapper flex items-center z-30"
 					>
 						<div
-							class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative"
+							class="modal max-w-md mx-5 md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative"
 						>
 							<div
 								class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
 							>
 								<h5
-									class=" text-primary-dark dark:text-primary-light text-xl"
+									class="text-primary-dark dark:text-primary-light text-xl"
 								>
 									What project are you looking for?
 								</h5>
@@ -55,33 +56,27 @@ export default {
 							</div>
 							<div class="modal-body p-5 w-full h-full">
 								<form class="max-w-xl m-4 text-left">
-									<div class="mt-0">
-										<input
-											class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-											id="name"
-											name="name"
-											type="text"
-											required=""
-											placeholder="Name"
-											aria-label="Name"
-										/>
-									</div>
-									<div class="mt-6">
-										<input
-											class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-											id="email"
-											name="email"
-											type="text"
-											required=""
-											placeholder="Email"
-											aria-label="Email"
-										/>
-									</div>
+									<FormInput
+										label="Full Name"
+										inputIdentifier="name"
+										class="mb-2"
+									/>
+									<FormInput
+										label="Email"
+										inputIdentifier="email"
+										inputType="email"
+									/>
+
 									<div class="mt-6">
+										<label
+											class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
+											for="project"
+											>Project Type</label
+										>
 										<select
-											class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-											id="subject"
-											name="subject"
+											class="w-full px-5 py-3 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+											id="project"
+											name="project"
 											type="text"
 											required=""
 											aria-label="Project Category"
@@ -90,16 +85,22 @@ export default {
 												v-for="category in categories"
 												:key="category.id"
 												:value="category.value"
-												>{{ category.name }}</option
 											>
+												{{ category.name }}
+											</option>
 										</select>
 									</div>
 
 									<div class="mt-6">
+										<label
+											class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
+											for="details"
+											>Details</label
+										>
 										<textarea
 											class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-md text-md bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
-											id="message"
-											name="message"
+											id="details"
+											name="details"
 											cols="14"
 											rows="6"
 											aria-label="Details"
@@ -110,15 +111,7 @@ export default {
 									<div class="mt-6 pb-4 sm:pb-1">
 										<Button
 											title="Send Request"
-											class="px-4
-											sm:px-6
-											py-2
-											sm:py-2.5
-											text-white
-											bg-indigo-500
-											hover:bg-indigo-600
-											rounded-md
-											focus:ring-1 focus:ring-indigo-900 duration-500"
+											class="px-4 sm:px-6 py-2 sm:py-2.5 text-white bg-indigo-500 hover:bg-indigo-600 rounded-md focus:ring-1 focus:ring-indigo-900 duration-500"
 											type="submit"
 											aria-label="Submit Request"
 										/>
@@ -130,11 +123,7 @@ export default {
 							>
 								<Button
 									title="Close"
-									class=" px-4
-									sm:px-6
-									py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
-									rounded-md
-									focus:ring-1 focus:ring-indigo-900 duration-500"
+									class="px-4 sm:px-6 py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light rounded-md focus:ring-1 focus:ring-indigo-900 duration-500"
 									@click="showModal()"
 									aria-label="Close Modal"
 								/>
@@ -149,7 +138,7 @@ export default {
 
 <style scoped>
 .modal-body {
-	max-height: 500px;
+	max-height: 570px;
 }
 .bg-gray-800-opacity {
 	background-color: #2d374850;