add: search bar

Add new header and search bar

app/components/Pp/Form/Input.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="Input">
+    <div class="input-wrapper flex-col">
+      <input
+        v-model="text"
+        :type="type"
+        :id="id"
+        :step="step"
+        :min="min"
+        :max="max"
+        :required="required"
+        placeholder=" "
+        @blur="emit('blur')"
+        :inputmode="mode"
+      />
+      <label :for="id">{{ label }}</label>
+    </div>
+    <span v-if="message">{{ message }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  type ?: 'text' | 'number'
+  max ?: number
+  min ?: number
+  step ?: number
+  required ?: boolean
+  message ?: string
+  label : string
+  id : string
+  mode ?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
+}
+
+const {
+  type = 'text',
+  required = false,
+  step = 0.01,
+  min = 1,
+  mode = 'text',
+} = defineProps<Props>()
+
+const emit = defineEmits(['blur'])
+
+const text = defineModel()
+</script>

app/components/Pp/Form/Search.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="Search">
+    <input
+        v-model="text"
+        :id="id"
+        :placeholder="label"
+        @blur="emit('search', text)"
+    />
+    <PpButton class="search-button">
+      <Icon name="uil:search" mode="svg" />
+    </PpButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  label : string
+  id : string
+}
+
+defineProps<Props>()
+
+const emit = defineEmits(['search'])
+const text = defineModel()
+</script>