From: Adam Dullage <redacted>
Date: Thu, 25 Apr 2024 19:50:53 +0000 (+0100)
Subject: SearchInput Component
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=5fee07f8550fca79aa76f126a01fd2d30dbd229b;p=flatnotes.git

SearchInput Component
---

diff --git a/client/components/Button.vue b/client/components/Button.vue
index 7a06d79..ecac649 100644
--- 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
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 a6694ce..1c8082f 100644
--- 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>