Move tab and title to component for DRYer code

src/components/ModerationHeader.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class='moderation_header'>
+		<h1 class='moderation_header__h1'>Moderation</h1>	
+		<div class='moderation_header__tabs'>
+			<div @click='$router.push("reports")' class='tab_button' :class='{
+				"tab_button--selected": selectedTab === "reports" 
+			}'>
+				Reports
+			</div>
+			<div @click='$router.push("bans")' class='tab_button' :class='{
+				"tab_button--selected": selectedTab === "bans"
+			}'>
+				Banned users
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'ModerationHeader',
+		props: ['selected-tab']
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.moderation_header {
+		@at-root #{&}__h1 {
+			margin: 0.5rem 0;
+		}
+		@at-root #{&}__tabs {
+			margin-bottom: 1rem;
+			border-bottom: 0.2rem solid $color__gray--darker;
+			width: 15rem;
+		}
+	}
+</style>

src/components/routes/AdminModerationBannedUsers.vue

@@ -1,10 +1,7 @@
 <template>
 	<div class='admin_moderation'>
-		<h1 style='margin: 0.5rem 0;'>Moderation</h1>
-		<div class='admin_moderation__tabs'>
-			<div class='tab_button' @click='$router.push("reports")'>Reports</div>
-			<div class='tab_button tab_button--selected'>Banned users</div>
-		</div>
+		<moderation-header selected-tab='bans'></moderation-header>
+
 		<div class='admin_moderation__header'>
 			<div>
 				Remove or edit banned users below, or add a new ban
@@ -93,6 +90,7 @@
 	import MenuButton from '../MenuButton'
 	import AvatarIcon from '../AvatarIcon'
 	import ConfirmModal from '../ConfirmModal'
+	import ModerationHeader from '../ModerationHeader'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
@@ -105,7 +103,8 @@
 			SelectButton,
 			MenuButton,
 			AvatarIcon,
-			ConfirmModal
+			ConfirmModal,
+			ModerationHeader
 		},
 		data () {
 			return {

src/components/routes/AdminModerationReports.vue

@@ -1,10 +1,6 @@
 <template>
 	<div class='admin_moderation'>
-		<h1 style='margin: 0.5rem 0;'>Moderation</h1>	
-		<div class='admin_moderation__tabs'>
-			<div class='tab_button tab_button--selected'>Reports</div>
-			<div class='tab_button' @click='$router.push("bans")'>Banned users</div>
-		</div>
+		<moderation-header selected-tab='reports'></moderation-header>
 
 		Below are posts reported by users - to remove the thread or block the user, click 'More options&hellip;'
 
@@ -70,6 +66,7 @@
 	import MenuButton from '../MenuButton'
 	import AvatarIcon from '../AvatarIcon'
 	import ConfirmModal from '../ConfirmModal'
+	import ModerationHeader from '../ModerationHeader'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
@@ -82,7 +79,8 @@
 			SelectButton,
 			MenuButton,
 			AvatarIcon,
-			ConfirmModal
+			ConfirmModal,
+			ModerationHeader
 		},
 		data () {
 			return {
@@ -159,12 +157,6 @@
 		padding: 2rem;
 		padding-top: 1rem;
 
-		@at-root #{&}__tabs {
-			margin-bottom: 1rem;
-			border-bottom: 0.2rem solid $color__gray--darker;
-			width: 15rem;
-		}
-
 		@at-root #{&}__reports {
 			margin-top: 1rem;
 			@extend .shadow_border;