update switcher

src/views/databoard/components/SelectorBtnGroup.vue

@@ -6,16 +6,27 @@
 -->
 
 <template>
-	<div class="selectorBtnGroup"></div>
+	<div class="selector-btn-group">
+		<button
+			class="btn"
+			v-for="opt in options"
+			:key="opt"
+			@click="active = opt"
+			:class="active == opt ? 'btn-active' : ''">
+			{{ opt }}
+		</button>
+	</div>
 </template>
 
 <script>
 export default {
 	name: 'SelectorBtnGroup',
 	components: {},
-	props: {},
+	props: ['options'],
 	data() {
-		return {};
+		return {
+			active: this.options[0] || 'default'
+		};
 	},
 	computed: {},
 	methods: {},
@@ -23,6 +34,36 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.selectorBtnGroup {
+button {
+	border: none;
+	appearance: none;
+	outline: none;
+	color: red;
+	font-size: 14px;
+	padding: 8px 12px;
+}
+
+button:first-child {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+button:last-child {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.selector-btn-group {
+}
+
+.btn {
+	background: #03233c;
+	color: #fff;
+	cursor: pointer;
+	transition: all 0.3s ease-out;
+
+	&.btn-active, 
+	&:hover {
+		background: #0f3d5c;
+	}
 }
 </style>