Add tab-view

src/components/TabView.vue

@@ -1,7 +1,13 @@
 <template>
 	<div class='tab_view'>
-		<slot name='first'></slot>
-		<slot name='second'></slot>
+		<div class='tab_view__tabs'>
+			<div class='tab_view__tab' :class='{"tab_view__tab--selected": showTab === 0}' @click='changeTab(0)'>{{tabs[0]}}</div>
+			<div class='tab_view__tab' :class='{"tab_view__tab--selected": showTab === 1}' @click='changeTab(1)'>{{tabs[1]}}</div>
+		</div>
+		<div class='tab_view__content'>
+			<slot name='first' v-if='showTab === 0'></slot>
+			<slot name='second' v-if='showTab === 1'></slot>
+		</div>
 	</div>
 </template>
 
@@ -11,15 +17,53 @@
 		props: ['tabs'],
 		data () {
 			return {
-
+				showTab: 0
 			}
 		},
-
+		methods: {
+			changeTab (index) {
+				this.showTab = index;
+			}
+		}
 	}
 </script>
 
 <style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
 	.tab_view {
+		@at-root #{&}__tabs {
+			display: flex;
+		}
+		@at-root #{&}__tab {
+			flex-grow: 1;
+			text-align: center;
+			cursor: pointer;
+			font-weight: 400;
+			padding: 0.5rem 0;
+			background-color: $color__gray--primary;
+			transition: background-color 0.2s;
 
+			&:hover {
+				background-color: $color__gray--darker;
+			}
+			&:active {
+				background-color: $color__gray--darkest;
+			}
+
+			@at-root #{&}--selected {
+				background-color: #fff;
+
+				&:hover {
+					background-color: #fff;
+				}
+				&:active {
+					background-color: #fff;
+				}
+			}
+		}
+		@at-root #{&}__content {
+			background-color: #fff;
+		}
 	}
 </style>

src/components/routes/Index.vue

@@ -3,10 +3,10 @@
 		<modal-window :showModal='showModal'>
 			<tab-view :tabs='["Sign up", "Login"]'>
 				<div slot='first'>
-					text
+					text 1
 				</div>
 				<div slot='second'>
-					text
+					text 2
 				</div>
 			</tab-view>
 		</modal-window>