Unify section search headers

app/components/ui/SectionSearchHero.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  modelValue: string;
+  searchPlaceholder: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+function updateValue(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <h1 class="text-3xl font-extrabold text-[#0f2f20]">{{ props.title }}</h1>
+
+    <label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
+      <svg
+        class="h-4 w-4 shrink-0 text-base-content/45"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.1667 14.1667L17.5 17.5"
+          stroke="currentColor"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="8.75"
+          cy="8.75"
+          r="5.83333"
+          stroke="currentColor"
+          stroke-width="1.6"
+        />
+      </svg>
+      <input
+        :value="props.modelValue"
+        type="text"
+        class="grow"
+        :placeholder="props.searchPlaceholder"
+        @input="updateValue"
+      >
+    </label>
+
+    <slot />
+  </div>
+</template>