add: search bar

Add new header and search bar

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>

app/components/Pp/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="Header">
-    <NuxtLink to="/">
-      <strong><span>Pro</span>Papier</strong>
+    <NuxtLink class="header-text" to="/">
+      ProPapier
     </NuxtLink>
     <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
@@ -22,10 +22,3 @@
 <script setup lang="ts">
 const available = false
 </script>
-
-<style scoped>
-  header a {
-    text-decoration: none;
-    color: var(--color-black);
-  }
-</style>