Feature/search button

src/resources/vue/pages/components/SearchBar.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div class="search-bar">
+      <svg class="scan-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path></svg>
+      <input type="text" class="gray-input" v-model="value" placeholder="Enter text">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GrayInput',
+  data() {
+    return {
+      value: ''
+    };
+  }
+};
+</script>
+
+<style scoped>
+.gray-input {
+  background-color: lightgray;
+  border: 1px;
+  border-radius: 5px;
+  width: 200px;
+  padding: 10px;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+}
+
+.search-bar i {
+  margin-right: 5px;
+}
+
+.scan-icon {
+  width: 38px;
+  height: 38px;
+  margin-right: 15px;
+}
+</style>

src/resources/vue/pages/components/SearchButton.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <button class="small-button">
+        <div class="search">zoek</div>
+        </button>
+    </div>
+</template>
+
+<script>
+</script>    
+<style scoped>
+.small-button {
+    background-color: #FF8C00;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    height: 30px; 
+    width: 100px;
+    cursor: pointer;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search {
+    font-size: 15px;    
+}
+</style>

src/resources/vue/pages/components/terminal-login-scan.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="gray">
+        <SearchBar></SearchBar>
+        <div class="spacer"></div>
+        <SearchButton></SearchButton>
+    </div>
+</template>
+
+<script>
+import SearchBar from './SearchBar.vue';
+import SearchButton from './SearchButton.vue';
+
+export default {
+    components: {
+        SearchButton,
+        SearchBar
+},
+};
+
+</script>
+<style>
+.gray {
+    background-color: #f2f2f2;
+    padding: 20px;
+    border-radius: 5px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.spacer {
+    margin-bottom: 20px;
+}
+
+</style>

src/resources/vue/pages/index.vue

@@ -1,11 +1,40 @@
 <template>
-    <h1>Hello World!</h1>
+    <div class="gray">
+        <SearchBar></SearchBar>
+        <div class="spacer"></div>
+        <SearchButton></SearchButton>
+    </div>
 </template>
 
 <script>
+import SearchBar from './components/SearchBar.vue';
+import SearchButton from './components/SearchButton.vue';
 
-</script>
+export default {
+    components: {
+        SearchButton,
+        SearchBar
+},
+};
 
+</script>
 <style>
+.gray {
+    background-color: #f2f2f2;
+    padding: 20px;
+    border-radius: 5px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.spacer {
+    margin-bottom: 20px;
+}
 
+body {
+    background-color: gray;
+}
 </style>

src/routes/api.php

@@ -17,3 +17,7 @@
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
+    return $request->user();
+});