feat: initial commit

apps/user-app/src/components/search/SearchInput.vue

@@ -0,0 +1,48 @@
+<!--
+  Ported from legacy henza_pwa/src/components/search/SearchInput.vue.
+  EXISTING ISSUE, ported as-is: the debounce watcher checks `if (value)` (the
+  ref object itself, always truthy) instead of `if (value.value)`, so the "x"
+  clear icon shows after any input and never hides itself based on actual
+  emptiness — only the explicit clear() click correctly hides it.
+-->
+<template>
+  <div class="w-full relative">
+    <input
+      v-model="value"
+      class="w-full h-[44px] rounded-[5px] px-[44px] py-[10px] text-[15px] border-solid border-[1px] border-lightGray"
+      :placeholder="placeHolder"
+      @keyup.enter="onSearch"
+    />
+    <Icon icon="vuesax-linear:search-normal-1" class="cursor-pointer absolute top-[11.82px] right-[12px] text-primary" size="25" @click="onSearch" />
+    <span class="absolute top-[10px] left-[12px] cursor-pointer text-primary">
+      <Icon icon="vuesax-linear:add" v-if="data.clear" class="ml-1 rotate-45" size="25" @click="clear" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import { useDebounce } from '@vueuse/core'
+import Icon from '../icon/Icon.vue'
+
+defineProps<{ placeHolder: string }>()
+const emit = defineEmits<{ (e: 'search', value: string | undefined): void }>()
+const data = reactive({ clear: false })
+const value = ref<string | undefined>(undefined)
+
+const onSearch = (): void => {
+  emit('search', value.value)
+}
+const clear = (): void => {
+  value.value = undefined
+  data.clear = false
+  emit('search', undefined)
+}
+
+const debounced = useDebounce(value, 700)
+watch(debounced, () => {
+  if (value) data.clear = true
+  else data.clear = false
+  onSearch()
+})
+</script>