Feature/button and input

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

src/resources/vue/components/Box.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="box" :style="{ backgroundColor: color }">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'Box',
+        props: {
+            color: {
+                type: String,
+                default: '#f2f2f2',
+            },
+        },
+    };
+</script>
+<style lang="scss">
+    .box {
+        padding: 30px;
+        border-radius: 5px;
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>

src/resources/vue/components/Button.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="button" :class="{disabled : disabled}" :style="{ backgroundColor: color }" @click="buttonAction">
+	{{ content }}
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Button',
+		props: {
+			color: {
+				type: String,
+				default: '#FF8C00',
+			},
+			disabled: {
+				type: Boolean,
+				default: false,
+			},
+			content: {
+				type: String,
+				default: 'Button',
+			},
+			buttonAction: {
+				type: Function,
+				default: () => {},
+			},
+		},
+		methods: {
+			handleClick() {
+				if (this.buttonAction) {
+					this.buttonAction();
+				} else {
+					console.log('No button action defined');
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="scss">
+	.button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 206px;
+		height: 50px;
+		cursor: pointer;
+		border-radius: 12px;
+		font-size: 24px;
+		font-weight: 500;
+
+		&.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+</style>

src/resources/vue/components/Input.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <input :id="id" :name="name" :type="type" :placeholder="placeholder" class="inputfield" :class="class" v-model="value">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Input',
+  props: {
+    id: {
+      type: String,
+      default: 'id',
+    },
+    name: {
+      type: String,
+      default: 'name',
+    },
+		type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: 'Placeholder',
+    },
+    class: {
+      type: String,
+      default: 'text-medium',
+    },
+	},
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.inputfield {
+  background-color: #D9D9D9;
+  border: none;
+  border-radius: 5px;
+  padding: 8px 16px;
+  font-size: 24px;
+  font-weight: 300;
+  text-align: center;
+  color: #000;
+  width: fit-content;
+
+  &:focus {
+    outline: 2px solid #000;
+    background-color: #c8c8c8;
+  }
+
+  &::placeholder {
+    color: #000;
+    opacity: 0.5;
+  }
+
+  &.text-small {
+    font-size: 16px;
+  }
+
+  &.text-medium {
+    font-size: 24px;
+  }
+
+  &.text-large {
+    font-size: 32px;
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+	<div>
+		<Box>
+			<div class="content">
+				<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>
+				<span class="text">Scan een artikel om te lenen</span>
+			</div>
+			<Input type="text" placeholder="Voer wat in" class="text-medium" />
+			<Button content="Zoek" :buttonAction="searchInput" />
+		</Box>
+	</div>
+</template>
+<script>
+	import Box from '../components/Box.vue';
+	import Button from '../components/Button.vue';
+	import Input from '../components/Input.vue';
+
+	export default {
+		name: 'index',
+		components: {
+			Box,
+			Button,
+			Input
+		},
+		methods: {
+			searchInput() {
+				// TODO: Implement search input
+				console.log('Search input');
+			},
+		},
+	};
+
+</script>
+<style lang="scss">
+	.content {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		gap: 40px;
+		margin-bottom: 17px;
+
+		.text {
+			color: #000;
+			max-width: 245px;
+			font-size: 28px;
+			font-weight: 700;
+			text-align: center;
+		}
+
+		.scan-icon {
+			width: 54px;
+			height: 53px;
+		}
+	}
+
+	.button {
+		margin-top: 15px;
+	}
+</style>

src/resources/vue/pages/index.vue

@@ -1,11 +1,8 @@
 <template>
-    <h1>Hello World!</h1>
+	<h1>Hello World!</h1>
 </template>
-
 <script>
 
 </script>
-
 <style>
-
-</style>
+</style>

src/routes/api.php

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