Add reuseable form input field

Author: realstoman

src/components/contact/ContactForm.vue

@@ -1,6 +1,7 @@
 <script>
 import Button from '../reusable/Button.vue';
-export default { components: { Button } };
+import FormInput from '../reusable/FormInput.vue';
+export default { components: { Button, FormInput } };
 </script>
 
 <template>
@@ -14,54 +15,13 @@ export default { components: { Button } };
 				Contact Form
 			</p>
 			<form action="#" class="font-general-regular space-y-7">
-				<div>
-					<label
-						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
-						for="name"
-						>Full Name</label
-					>
-					<input
-						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="name"
-						name="name"
-						type="text"
-						required=""
-						placeholder="Your Name"
-						aria-label="Name"
-					/>
-				</div>
-				<div>
-					<label
-						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
-						for="email"
-						>Email</label
-					>
-					<input
-						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="email"
-						name="email"
-						type="text"
-						required=""
-						placeholder="Your Email"
-						aria-label="Email"
-					/>
-				</div>
-				<div>
-					<label
-						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
-						for="subject"
-						>Subject</label
-					>
-					<input
-						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="subject"
-						name="subject"
-						type="text"
-						required=""
-						placeholder="Subject"
-						aria-label="Subject"
-					/>
-				</div>
+				<FormInput label="Full Name" inputIdentifier="name" />
+				<FormInput
+					label="Email"
+					inputIdentifier="email"
+					inputType="email"
+				/>
+				<FormInput label="Subject" inputIdentifier="subject" />
 
 				<div>
 					<label

src/components/reusable/FormInput.vue

@@ -0,0 +1,46 @@
+<script>
+export default {
+	props: {
+		label: {
+			type: String,
+			default: '',
+		},
+		inputIdentifier: {
+			type: String,
+			default: '',
+		},
+		val: {
+			type: [String, Number],
+			default: '',
+		},
+		inputType: {
+			type: String,
+			default: 'text',
+		},
+	},
+};
+</script>
+
+<template>
+	<div>
+		<label
+			class="block mb-2 text-lg text-primary-dark dark:text-primary-light"
+			:for="label"
+			>{{ label }}</label
+		>
+		<input
+			class="w-full px-5 py-3 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="inputIdentifier"
+			:name="inputIdentifier"
+			:placeholder="label"
+			:aria-label="inputIdentifier"
+			required
+			v-bind="$attrs"
+			:value="val"
+			@input="$emit('update:val', $event.target.value)"
+			:type="inputType"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped></style>