card navigation refactoring

resources/js/components/Admin/AppInputSwitch.vue

@@ -8,7 +8,7 @@
 			</label>
 
 			<!--Input Description-->
-			<span v-if="description" class="text-xs text-gray-500 leading-3 -mt-0.5 block" v-html="description"></span>
+			<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span>
 
 			<!--Input Description-->
 			<span v-if="error" class="error-message">

resources/js/components/Admin/AppInputText.vue

@@ -10,7 +10,7 @@
 		<slot></slot>
 
 		<!--Input Description-->
-		<small v-if="description" class="text-xs text-gray-500 leading-normal -mt-0.5 block" v-html="description"></small>
+		<small v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></small>
 
 		<!--Input Description-->
 		<span v-if="error" class="text-red-700 pt-2 text-xs">

resources/js/components/Admin/CardNavigation.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="whitespace-nowrap overflow-x-auto">
+		<router-link
+			class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
+			:class="{'text-theme': routeName === page.route, 'text-gray-600': routeName !== page.route}"
+			v-for="(page, i) in pages"
+			:to="{name: page.route}"
+			:key="i"
+			replace
+		>
+			{{ page.title }}
+		</router-link>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CardNavigation',
+	props: [
+		'pages'
+	],
+	computed: {
+		routeName() {
+			return this.$route.name
+		}
+	},
+}
+</script>