SearchInput Component

diff --git a/client/components/Button.vue b/client/components/Button.vue
index 7a06d79cf81fcf06df6762622e5d4f982606632b..ecac649aca1c5cca011421155c4da7dec08600ad 100644 (file)
--- a/client/components/Button.vue
+++ b/client/components/Button.vue
@@ -6,10 +6,10 @@
       v-if="iconPath"
       type="mdi"
       :path="iconPath"
-      size="1.25em"
-      class="mr-1"
+      :size="iconSize"
+      :class="{ 'mr-1': label }"
     ></SvgIcon>
-    <span>{{ label }}</span>
+    <span v-if-label>{{ label }}</span>
   </button>
 </template>
 
@@ -18,6 +18,10 @@ import SvgIcon from "@jamescoyle/vue-icon";
 
 defineProps({
   iconPath: String,
+  iconSize: {
+    type: String,
+    default: "1.25em",
+  },
   label: String,
 });
 </script>

diff --git a/client/components/SearchInput.vue b/client/components/SearchInput.vue
new file mode 100644 (file)
index 0000000..c6ac6eb
--- /dev/null
+++ b/client/components/SearchInput.vue
@@ -0,0 +1,23 @@
+<template>
+  <form class="flex" v-on:submit.prevent="search">
+    <input
+      type="text"
+      class="rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2"
+      placeholder="Search"
+    />
+    <Button
+      :iconPath="mdilMagnify"
+      iconSize="1.75em"
+      class="rounded-l-none border border-l-0 border-theme-border"
+    />
+  </form>
+</template>
+
+<script setup>
+import Button from "./Button.vue";
+import { mdilMagnify } from "@mdi/light-js";
+
+function search() {
+  console.log("searching...");
+}
+</script>

diff --git a/client/views/HomeView.vue b/client/views/HomeView.vue
index a6694ced7cdd64d9b4c537fd126984f565288b89..1c8082fc4c3c08ba8028f72ac47f486d7e2509fa 100644 (file)
--- a/client/views/HomeView.vue
+++ b/client/views/HomeView.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="flex h-full flex-col items-center justify-center">
-    <p>Home</p>
-    <p>Page</p>
+    <SearchInput />
   </div>
 </template>
+
+<script setup>
+import SearchInput from "../components/SearchInput.vue";
+</script>