Add components nayarahilton#1

src/components/main-input.vue

@@ -0,0 +1,51 @@
+<template>
+	<input :type="type" :name="name" :id="id" class="input" :class="inputDesign" :placeholder="placeholder">
+</template>
+
+<script>
+export default {
+	props: {
+		type: {
+			required: true,
+			type: String,
+		},
+		name: {
+			type: String,
+		},
+		id: {
+			type: String,
+		},
+		design: {
+			type: String,
+		},
+		placeholder: {
+			required: true,
+			type: String,
+		},
+	},
+	computed: {
+		inputDesign() {
+			if (this.design === 'main' || !this.design) return 'input-main';
+			if (this.design === 'home') return 'input-home';
+		},
+	},
+};
+</script>
+
+<style scoped lang="stylus">
+	*
+		box-sizing border-box
+	.input
+		margin-bottom 10px
+		padding 10px
+		width 100%
+
+		&-main
+			border 1px solid #ccc
+			border-radius 10px
+			color #ccc
+
+		&-home
+			border-bottom 1px solid #fff
+			color #fff
+</style>

src/views/RegisterView.vue

@@ -1,37 +1,39 @@
 <template>
-  <div class="register">
-    <div class="presentation-holder">
-      <h2 class="title">Seus Dados</h2>
-      <p>{{msg}}</p>
-    </div>
+	<div class="register">
+		<div class="presentation-holder">
+			<h2 class="title">Seus Dados</h2>
+			<p>{{msg}}</p>
+		</div>
 
-    <div class="btn-holder">
-      <social-button text-inner="Completar com o Linkedin"></social-button>
-      <input class="input" type="text" placeholder="Nome">
-      <input class="input" type="email" placeholder="Email">
-      <input class="input" type="password" placeholder="Senha">
-      <div class="login-holder">
-        <main-button text-inner="Próximo" linkto="/Home"></main-button>
-      </div>
-    </div>
-  </div>
+		<div class="btn-holder">
+			<social-button text-inner="Completar com o Linkedin"></social-button>
+			<main-input type="text" placeholder="Nome" />
+			<main-input type="email" placeholder="Email" />
+			<main-input type="password" placeholder="Senha" />
+			<div class="login-holder">
+				<main-button text-inner="Próximo" linkto="/Home"></main-button>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 import socialButton from '../components/social-button';
 import mainButton from '../components/main-button';
+import mainInput from '../components/main-input';
 
 export default {
-  name: 'register',
-  data() {
-    return {
-      msg: 'Todos os campos são obrigatórios',
-    };
-  },
-  components: {
-    'social-button': socialButton,
-    'main-button': mainButton,
-  },
+	name: 'register',
+	data() {
+		return {
+			msg: 'Todos os campos são obrigatórios',
+		};
+	},
+	components: {
+		'social-button': socialButton,
+		'main-button': mainButton,
+		'main-input': mainInput,
+	},
 };
 </script>