From fd52e49bc165abd21ab521e054ead3816e83bf3f Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 10 Jan 2024 14:13:52 +0100
Subject: [PATCH 01/11] feat: added scan-icon

---
 src/resources/vue/components/icon.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/resources/vue/components/icon.vue b/src/resources/vue/components/icon.vue
index b20a4b1..70c043e 100644
--- a/src/resources/vue/components/icon.vue
+++ b/src/resources/vue/components/icon.vue
@@ -22,6 +22,8 @@ export default {
           return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.4337 7C20.7734 7 20.2074 7.09434 19.6413 7.28301C15.9622 8.03771 13.0377 10.9622 12.283 14.6413C12 15.2074 12 15.7734 12 16.4337V68.3194C12 76.1494 18.3206 82.47 26.1506 82.47H78.0362V73.0362H26.1506C23.5092 73.0362 21.4337 70.9608 21.4337 68.3194C21.4337 65.6779 23.5092 63.6025 26.1506 63.6025H78.0362V11.7169C78.0362 9.07542 75.9608 7 73.3194 7H68.6025V35.3012L59.1687 25.8675L49.735 35.3012V7H21.4337Z" fill="${this.color || 'black'}"/></svg>`;
         case 'warning':
           return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_835)"><path d="M17.5 2.1875C18.4707 2.1875 19.3663 2.7002 19.8584 3.54102L34.6241 28.6973C35.1231 29.5449 35.1231 30.5908 34.6377 31.4385C34.1524 32.2861 33.2432 32.8125 32.2657 32.8125H2.73442C1.75688 32.8125 0.847697 32.2861 0.362345 31.4385C-0.123007 30.5908 -0.116171 29.5381 0.376017 28.6973L15.1416 3.54102C15.6338 2.7002 16.5293 2.1875 17.5 2.1875ZM17.5 10.9375C16.5909 10.9375 15.8594 11.6689 15.8594 12.5781V20.2344C15.8594 21.1436 16.5909 21.875 17.5 21.875C18.4092 21.875 19.1407 21.1436 19.1407 20.2344V12.5781C19.1407 11.6689 18.4092 10.9375 17.5 10.9375ZM19.6875 26.25C19.6875 25.6698 19.4571 25.1134 19.0468 24.7032C18.6366 24.293 18.0802 24.0625 17.5 24.0625C16.9199 24.0625 16.3635 24.293 15.9532 24.7032C15.543 25.1134 15.3125 25.6698 15.3125 26.25C15.3125 26.8302 15.543 27.3866 15.9532 27.7968C16.3635 28.207 16.9199 28.4375 17.5 28.4375C18.0802 28.4375 18.6366 28.207 19.0468 27.7968C19.4571 27.3866 19.6875 26.8302 19.6875 26.25Z" fill="#E57E1F"/></g><defs><clipPath id="clip0_21_835"><rect width="35" height="35" fill="${this.color || 'black'}"/></clipPath></defs></svg>`;
+        case 'scan-icon':
+          return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z" fill="${this.color || 'black'}"></path></svg>`;
         default:
           return '';
       }

From 22751fc67eb48bd0a05178b799eac4d2b40d5eec Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 10 Jan 2024 14:14:05 +0100
Subject: [PATCH 02/11] fix: icon offset

---
 src/resources/vue/components/icon.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/resources/vue/components/icon.vue b/src/resources/vue/components/icon.vue
index 70c043e..5e62ac5 100644
--- a/src/resources/vue/components/icon.vue
+++ b/src/resources/vue/components/icon.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-html="iconSVG"></div>
+    <div class="icon" v-html="iconSVG"></div>
 </template>
 
 <script>
@@ -32,4 +32,9 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss">
+  .icon {
+    display: flex;
+    align-items: center;
+  }
+</style>

From 1f77cde9cba8ba3500820e4a3a86b50f3d869813 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 10 Jan 2024 14:14:52 +0100
Subject: [PATCH 03/11] fix: flex direction not variable

---
 src/resources/vue/components/Box.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/resources/vue/components/Box.vue b/src/resources/vue/components/Box.vue
index f69ed97..1adf2f3 100644
--- a/src/resources/vue/components/Box.vue
+++ b/src/resources/vue/components/Box.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="box" :style="{ backgroundColor: color }">
+    <div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
         <slot></slot>
     </div>
 </template>
@@ -11,6 +11,10 @@
                 type: String,
                 default: '#f2f2f2',
             },
+            direction: {
+                type: String,
+                default: 'column',
+            },
         },
     };
 </script>
@@ -20,7 +24,6 @@
         border-radius: 5px;
         width: fit-content;
         display: flex;
-        flex-direction: column;
         justify-content: space-between;
         align-items: center;
     }

From 46312b615e0d2b3a7d70caa5adc38b849d20aebe Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 10 Jan 2024 14:16:19 +0100
Subject: [PATCH 04/11] fix: moved icon, fixed direction, added props and some
 styling

---
 .../vue/components/terminal-scan.vue          | 58 ++++++++++++++++---
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/resources/vue/components/terminal-scan.vue b/src/resources/vue/components/terminal-scan.vue
index 1edfbce..3311e30 100644
--- a/src/resources/vue/components/terminal-scan.vue
+++ b/src/resources/vue/components/terminal-scan.vue
@@ -1,14 +1,17 @@
 <template>
 	<div>
-		<Box>
+		<Box :direction="direction">
 			<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>
+				<Icon v-if="text" icon="scan-icon" size="52px" />
+				<span v-if="text" class="text">{{ text }}</span>
+			</div>
+			<div class="form">
+				<div class="form-input">
+					<Icon v-if="!text" :icon="icon" size="52px" /> <!-- v-if="direction == row" -->
+					<Input type="text" :placeholder="placeholder" class="text-medium" />
+				</div>
+				<Button content="Zoek" :buttonAction="searchInput" />
 			</div>
-			<Input type="text" placeholder="Voer wat in" class="text-medium" />
-			<Button content="Zoek" :buttonAction="searchInput" />
 		</Box>
 	</div>
 </template>
@@ -16,13 +19,15 @@
 	import Box from '../components/Box.vue';
 	import Button from '../components/Button.vue';
 	import Input from '../components/Input.vue';
+	import Icon from '../components/Icon.vue';
 
 	export default {
 		name: 'index',
 		components: {
 			Box,
 			Button,
-			Input
+			Input,
+			Icon
 		},
 		methods: {
 			searchInput() {
@@ -30,6 +35,24 @@
 				console.log('Search input');
 			},
 		},
+		props: {
+			direction: {
+				type: String,
+				default: 'column',
+			},
+			text: {
+				type: String,
+				default: 'Lorem Ipsum Text',
+			},
+			placeholder: {
+				type: String,
+				default: 'Placeholder',
+			},
+			icon: {
+				type: String,
+				default: 'default',
+			},
+		},
 	};
 
 </script>
@@ -41,6 +64,10 @@
 		gap: 40px;
 		margin-bottom: 17px;
 
+		&.column {
+			flex-direction: column !important;
+		}
+
 		.text {
 			color: #000;
 			max-width: 245px;
@@ -55,6 +82,21 @@
 		}
 	}
 
+	.form {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 7px;
+
+		.form-input {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 10px;
+		}
+	}
+
 	.button {
 		margin-top: 15px;
 	}

From 0c15317c5f3abcf0aac6f377fd96cb1d4a1b06e3 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 10 Jan 2024 14:16:42 +0100
Subject: [PATCH 05/11] feat: terminal startpage

---
 src/resources/vue/pages/index.vue | 38 +++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/resources/vue/pages/index.vue b/src/resources/vue/pages/index.vue
index 505b780..b7fe84b 100644
--- a/src/resources/vue/pages/index.vue
+++ b/src/resources/vue/pages/index.vue
@@ -1,8 +1,36 @@
 <template>
-	<h1>Hello World!</h1>
+  <div class="terminal-content">
+    <span class="terminal-title">Scan uw pas om te lenen, <br> of een artikel om terug te brengen</span>
+    <TerminalScan text="" icon="scan-icon" direction="row" placeholder="101010101" />
+  </div>
 </template>
 <script>
-export default {
-  name: "Index",
-};
-</script>
\ No newline at end of file
+  import TerminalScan from "../components/terminal-scan.vue";
+
+  export default {
+    name: "Index",
+    components: {
+      TerminalScan,
+    },
+  };
+</script>
+<style lang="scss">
+  .terminal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+    margin-top: 20px;
+    width: 98vw;
+    height: 96vh;
+
+    .terminal-title {
+      font-size: 52px;
+      font-weight: 700;
+      text-align: center;
+      color: #F7F4F3;
+      max-width: 840px;
+    }
+  }
+</style>
\ No newline at end of file

From 8d8428e577ad0b3b949ed9ef16dcbc2dde52a50d Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 10:32:06 +0100
Subject: [PATCH 06/11] cleanup: removed comment

---
 src/resources/vue/components/terminal-scan.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/resources/vue/components/terminal-scan.vue b/src/resources/vue/components/terminal-scan.vue
index 3311e30..fac9ac4 100644
--- a/src/resources/vue/components/terminal-scan.vue
+++ b/src/resources/vue/components/terminal-scan.vue
@@ -7,7 +7,7 @@
 			</div>
 			<div class="form">
 				<div class="form-input">
-					<Icon v-if="!text" :icon="icon" size="52px" /> <!-- v-if="direction == row" -->
+					<Icon v-if="!text" :icon="icon" size="52px" />
 					<Input type="text" :placeholder="placeholder" class="text-medium" />
 				</div>
 				<Button content="Zoek" :buttonAction="searchInput" />

From 03bfca4c5ac111a094c2695bfef94a7d84f164de Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 10:32:17 +0100
Subject: [PATCH 07/11] cleanup: removed console log

---
 src/resources/vue/components/terminal-scan.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/resources/vue/components/terminal-scan.vue b/src/resources/vue/components/terminal-scan.vue
index fac9ac4..c91a57f 100644
--- a/src/resources/vue/components/terminal-scan.vue
+++ b/src/resources/vue/components/terminal-scan.vue
@@ -31,8 +31,7 @@
 		},
 		methods: {
 			searchInput() {
-				// TODO: Implement search input
-				console.log('Search input');
+				// TODO: Search for library pass or item
 			},
 		},
 		props: {

From 61aa5cda3d028557d0c3346bf10488e0afebc2c1 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 10:32:47 +0100
Subject: [PATCH 08/11] fix: button content not variable

---
 src/resources/vue/components/terminal-scan.vue | 6 +++++-
 src/resources/vue/pages/index.vue              | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/resources/vue/components/terminal-scan.vue b/src/resources/vue/components/terminal-scan.vue
index c91a57f..d53792a 100644
--- a/src/resources/vue/components/terminal-scan.vue
+++ b/src/resources/vue/components/terminal-scan.vue
@@ -10,7 +10,7 @@
 					<Icon v-if="!text" :icon="icon" size="52px" />
 					<Input type="text" :placeholder="placeholder" class="text-medium" />
 				</div>
-				<Button content="Zoek" :buttonAction="searchInput" />
+				<Button :content="buttonText" :buttonAction="searchInput" />
 			</div>
 		</Box>
 	</div>
@@ -51,6 +51,10 @@
 				type: String,
 				default: 'default',
 			},
+			buttonText: {
+				type: String,
+				default: 'Button',
+			},
 		},
 	};
 
diff --git a/src/resources/vue/pages/index.vue b/src/resources/vue/pages/index.vue
index b7fe84b..8a457ab 100644
--- a/src/resources/vue/pages/index.vue
+++ b/src/resources/vue/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="terminal-content">
     <span class="terminal-title">Scan uw pas om te lenen, <br> of een artikel om terug te brengen</span>
-    <TerminalScan text="" icon="scan-icon" direction="row" placeholder="101010101" />
+    <TerminalScan text="" buttonText="Zoeken" icon="scan-icon" direction="row" placeholder="101010101" />
   </div>
 </template>
 <script>

From c2c2e35d003cd7fa2521dba53509dca1354bf8f0 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 11:04:57 +0100
Subject: [PATCH 09/11] style: 4 tabs to 2 tabs

---
 src/resources/vue/components/Box.vue      | 49 ++++++++-------
 src/resources/vue/components/ItemCard.vue | 77 +++++++++++------------
 2 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/src/resources/vue/components/Box.vue b/src/resources/vue/components/Box.vue
index 1adf2f3..a54a1bc 100644
--- a/src/resources/vue/components/Box.vue
+++ b/src/resources/vue/components/Box.vue
@@ -1,30 +1,31 @@
 <template>
-    <div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
-        <slot></slot>
-    </div>
+	<div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
+		<slot></slot>
+	</div>
 </template>
+
 <script>
-    export default {
-        name: 'Box',
-        props: {
-            color: {
-                type: String,
-                default: '#f2f2f2',
-            },
-            direction: {
-                type: String,
-                default: 'column',
-            },
-        },
-    };
+	export default {
+		name: 'Box',
+		props: {
+			color: {
+				type: String,
+				default: '#f2f2f2',
+			},
+			direction: {
+				type: String,
+				default: 'column',
+			},
+		},
+	};
 </script>
 <style lang="scss">
-    .box {
-        padding: 30px;
-        border-radius: 5px;
-        width: fit-content;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
+	.box {
+		padding: 30px;
+		border-radius: 5px;
+		width: fit-content;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 </style>
\ No newline at end of file
diff --git a/src/resources/vue/components/ItemCard.vue b/src/resources/vue/components/ItemCard.vue
index bfa62da..5a8944d 100644
--- a/src/resources/vue/components/ItemCard.vue
+++ b/src/resources/vue/components/ItemCard.vue
@@ -3,8 +3,8 @@
     <div class="left">
       <Icon icon="book" size="90" color="white" />
       <div class="info">
-          <p>{{ title }}</p>
-          <p>{{ description }}</p>
+        <p>{{ title }}</p>
+        <p>{{ description }}</p>
       </div>
     </div>
     <div v-if="warning" class="right">
@@ -14,56 +14,55 @@
 </template>
 
 <script>
-import Icon from "./icon.vue";
+  import Icon from "./icon.vue";
 
-export default {
-  name: "ItemCard",
-  props: {
-    title: String,
-    description: String,
-    warning: Boolean,
-  },
-  components: {
-    Icon,
-  },
-};
+  export default {
+    name: "ItemCard",
+    props: {
+      title: String,
+      description: String,
+      warning: Boolean,
+    },
+    components: {
+      Icon,
+    },
+  };
 </script>
-
 <style lang="scss">
-.item-card {
-  width: 667px;
-  height: 116px;
-  background: #1d243a;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 13px;
-
-  .left {
+  .item-card {
+    width: 667px;
+    height: 116px;
+    background: #1d243a;
+    border-radius: 8px;
     display: flex;
     align-items: center;
-    width: 100%;
-    height: 100%;
+    justify-content: space-between;
+    padding: 13px;
 
-    .info {
-      margin-left: 20px;
+    .left {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      height: 100%;
 
-      p {
+      .info {
+        margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+
+        p {
           color: #fff;
           font-size: 32px;
           font-family: "Outfit";
           font-weight: 700;
+        }
       }
     }
-  }
 
-  .right {
-    display: flex;
-    align-items: flex-start;
-    height: 100%;
+    .right {
+      display: flex;
+      align-items: flex-start;
+      height: 100%;
+    }
   }
-}
-</style>
+</style>
\ No newline at end of file

From 79444f7977bd7cd51f734484bcde3d767f7085c0 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 14:07:41 +0100
Subject: [PATCH 10/11] fix: removed non needed max width

---
 src/resources/vue/pages/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/resources/vue/pages/index.vue b/src/resources/vue/pages/index.vue
index 8a457ab..4f68779 100644
--- a/src/resources/vue/pages/index.vue
+++ b/src/resources/vue/pages/index.vue
@@ -30,7 +30,6 @@
       font-weight: 700;
       text-align: center;
       color: #F7F4F3;
-      max-width: 840px;
     }
   }
 </style>
\ No newline at end of file

From 9fd95a3920315d026f6f4cb22b9d255aa2c3b715 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 11 Jan 2024 14:25:23 +0100
Subject: [PATCH 11/11] fix: icon to lowercase to fix build

---
 src/resources/vue/components/terminal-scan.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/resources/vue/components/terminal-scan.vue b/src/resources/vue/components/terminal-scan.vue
index d53792a..48c8f87 100644
--- a/src/resources/vue/components/terminal-scan.vue
+++ b/src/resources/vue/components/terminal-scan.vue
@@ -19,7 +19,7 @@
 	import Box from '../components/Box.vue';
 	import Button from '../components/Button.vue';
 	import Input from '../components/Input.vue';
-	import Icon from '../components/Icon.vue';
+	import Icon from '../components/icon.vue';
 
 	export default {
 		name: 'index',