Other components refactoring

Author: realstoman

src/components/HireMeModal.vue

@@ -1,5 +1,23 @@
+<script>
+import feather from 'feather-icons';
+import Button from './reusable/Button.vue';
+export default {
+	props: ['showModal', 'modal', 'categories'],
+	components: { Button },
+	data() {
+		return {};
+	},
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+	methods: {},
+};
+</script>
+
 <template>
-	<!-- Hire me modal -->
 	<transition name="fade">
 		<div v-show="modal" class="font-general-regular fixed inset-0 z-30">
 			<!-- Modal body background as backdrop -->
@@ -129,25 +147,6 @@
 	</transition>
 </template>
 
-<script>
-import feather from 'feather-icons';
-import Button from './reusable/Button.vue';
-export default {
-	props: ['showModal', 'modal', 'categories'],
-	components: { Button },
-	data() {
-		return {};
-	},
-	mounted() {
-		feather.replace();
-	},
-	updated() {
-		feather.replace();
-	},
-	methods: {},
-};
-</script>
-
 <style scoped>
 .modal-body {
 	max-height: 500px;

src/components/ThemeSwitcher.vue

@@ -1,19 +1,3 @@
-<template>
-	<!-- Theme switcher icons -->
-	<a href="#" @click.prevent="toggleTheme" aria-label="Theme Switcher">
-		<i
-			v-if="theme === 'light'"
-			data-feather="moon"
-			class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light w-5"
-		></i>
-		<i
-			v-else
-			data-feather="sun"
-			class="text-gray-200 hover:text-gray-50 w-5"
-		></i>
-	</a>
-</template>
-
 <script>
 export default {
 	props: {
@@ -32,3 +16,18 @@ export default {
 	},
 };
 </script>
+
+<template>
+	<a href="#" @click.prevent="toggleTheme" aria-label="Theme Switcher">
+		<i
+			v-if="theme === 'light'"
+			data-feather="moon"
+			class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light w-5"
+		></i>
+		<i
+			v-else
+			data-feather="sun"
+			class="text-gray-200 hover:text-gray-50 w-5"
+		></i>
+	</a>
+</template>

src/components/reusable/Button.vue

@@ -1,7 +1,3 @@
-<template>
-	<button>{{ title }}</button>
-</template>
-
 <script>
 export default {
 	props: ['title'],
@@ -13,4 +9,8 @@ export default {
 };
 </script>
 
+<template>
+	<button>{{ title }}</button>
+</template>
+
 <style lang="scss" scoped></style>