Add select options component

src/components/SelectButton.vue

@@ -19,7 +19,7 @@
 <script>
 	export default {
 		name: 'SelectButton',
-		props: ['options', 'value'],
+		props: ['options', 'value', 'name'],
 		data () {
 			var self = this;
 			var index = 0;

src/components/SelectOptions.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class='select_options'>
+		<button
+			v-for='option in options'
+			class='button'
+			:class='{"button--orange": option.value === selected}'
+			@click='select(option.value)'
+		>
+			{{option.name}}
+		</button>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'SelectOptions',
+		props: ['name', 'options'],
+		computed: {
+			selected: {
+				get () {
+					return this.$store.state.selectOptions[this.name];
+				},
+				set (val) {
+					this.$store.commit({
+						type: 'setSelectOptions',
+						name: this.name,
+						value: val
+					});
+				}
+			}
+		},
+		methods: {
+			select (index) {
+				this.selected = index;
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	.select_options {
+		display: inline-block;
+
+		button {
+			margin-right: 0.25rem;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+</style>

src/components/routes/Index.vue

@@ -2,9 +2,7 @@
 	<div class='index'>
 		<div class='thread_sorting'>
 			<select-button style='margin-right: 1rem' v-model='selectedCategory' :options='categories'></select-button>
-			<div class='button button--orange'>New</div>
-			<div class='button'>Most active</div>
-			<div class='button'>No replies</div>
+			<select-options :options='options' name='filterOptions'></select-options>
 		</div>
 		<table class='threads'>
 			<colgroup>
@@ -39,16 +37,23 @@
 <script>
 	import SelectButton from '../SelectButton'
 	import TabView from '../TabView'
+	import SelectOptions from '../SelectOptions'
 
 	export default {
 		name: 'index',
 		components: {
 			SelectButton,
-			TabView
+			TabView,
+			SelectOptions
 		},
 		data () {
 			return {
-			
+				options: [
+					{name: 'New', value: 'NEW'},
+					{name: 'Most active', value: 'MOST_ACTIVE'},
+					{name: 'No replies', value: 'NO_REPLIES'}
+				],
+				selected: null
 			}
 		},
 		computed: {

src/store/index.js

@@ -20,6 +20,9 @@ export default new Vuex.Store({
 		tabs: {
 			account: 0
 		},
+		selectOptions: {
+			filterOptions: 'NEW'
+		},
 		modals: {
 			account: false
 		}
@@ -28,6 +31,9 @@ export default new Vuex.Store({
 		setTab (state, payload) {
 			state.tabs[payload.tab] = payload.index;
 		},
+		setSelectOptions (state, payload) {
+			state.selectOptions[payload.name] = payload.value;
+		},
 		showModal (state, modal) {
 			state.modals[modal] = true;
 		},