Button reuable component

Author: realstoman

src/components/reusable/Button.vue

@@ -0,0 +1,16 @@
+<template>
+	<button>{{ title }}</button>
+</template>
+
+<script>
+export default {
+	props: ['title'],
+	data: () => {
+		return {
+			//
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/Home.vue

@@ -12,21 +12,24 @@
 				to="/projects"
 				class="font-general-medium flex items-center px-6 py-3 rounded-xl shadow-lg hover:shadow-xl bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 text-white text-lg sm:text-xl"
 				aria-label="More Projects"
-				>More Projects</router-link
 			>
+				<Button title="More Projects" />
+			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
 import AppBanner from '@/components/shared/AppBanner';
 import ProjectsGrid from '../components/projects/ProjectsGrid.vue';
+import Button from '../components/reusable/Button.vue';
 
 export default {
 	name: 'Home',
 	components: {
 		AppBanner,
 		ProjectsGrid,
+		Button,
 	},
 };
 </script>