Create reuseable text area

Author: realstoman

src/components/HireMeModal.vue

@@ -2,9 +2,10 @@
 import feather from 'feather-icons';
 import Button from './reusable/Button.vue';
 import FormInput from './reusable/FormInput.vue';
+import FormTextarea from './reusable/FormTextarea.vue';
 export default {
 	props: ['showModal', 'modal', 'categories'],
-	components: { Button, FormInput },
+	components: { Button, FormInput, FormTextarea },
 	data() {
 		return {};
 	},
@@ -67,7 +68,7 @@ export default {
 										inputType="email"
 									/>
 
-									<div class="mt-6">
+									<div class="mt-6 mb-4">
 										<label
 											class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
 											for="project"
@@ -91,24 +92,12 @@ export default {
 										</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="details"
-											name="details"
-											cols="14"
-											rows="6"
-											aria-label="Details"
-											placeholder="Project description"
-										></textarea>
-									</div>
+									<FormTextarea
+										label="Details"
+										textareaIdentifier="details"
+									/>
 
-									<div class="mt-6 pb-4 sm:pb-1">
+									<div class="mt-7 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"

src/components/contact/ContactForm.vue

@@ -1,7 +1,8 @@
 <script>
 import Button from '../reusable/Button.vue';
 import FormInput from '../reusable/FormInput.vue';
-export default { components: { Button, FormInput } };
+import FormTextarea from '../reusable/FormTextarea.vue';
+export default { components: { Button, FormInput, FormTextarea } };
 </script>
 
 <template>
@@ -22,22 +23,7 @@ export default { components: { Button, FormInput } };
 					inputType="email"
 				/>
 				<FormInput label="Subject" inputIdentifier="subject" />
-
-				<div>
-					<label
-						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
-						for="message"
-						>Message</label
-					>
-					<textarea
-						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
-						id="message"
-						name="message"
-						cols="14"
-						rows="6"
-						aria-label="Message"
-					></textarea>
-				</div>
+				<FormTextarea label="Message" textareaIdentifier="message" />
 
 				<div>
 					<Button

src/components/reusable/FormInput.vue

@@ -34,11 +34,11 @@ export default {
 			:name="inputIdentifier"
 			:placeholder="label"
 			:aria-label="inputIdentifier"
-			required
-			v-bind="$attrs"
 			:value="val"
-			@input="$emit('update:val', $event.target.value)"
 			:type="inputType"
+			v-bind="$attrs"
+			@input="$emit('update:val', $event.target.value)"
+			required
 		/>
 	</div>
 </template>

src/components/reusable/FormTextarea.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		textareaIdentifier: {
+			type: String,
+			default: '',
+		},
+		val: {
+			type: [String, Number],
+			default: '',
+		},
+	},
+};
+</script>
+
+<template>
+	<div>
+		<label
+			class="block text-lg text-primary-dark dark:text-primary-light mb-2"
+			:for="textareaIdentifier"
+			>{{ label }}</label
+		>
+		<textarea
+			class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
+			:id="textareaIdentifier"
+			:name="textareaIdentifier"
+			:aria-label="textareaIdentifier"
+			:placeholder="label"
+			v-bind="$attrs"
+			@input="$emit('update:val', $event.target.value)"
+			cols="14"
+			rows="6"
+		></textarea>
+	</div>
+</template>
+
+<style lang="scss" scoped></style>