ทะเบียนประวัติ: เพิ่มหน้าการ์ด,ตาราง

src/modules/04_registryNew/components/registry/Search.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const search = ref<string>("");
+</script>
+<template>
+  <div
+    class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
+    style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
+  >
+    <span
+      style="
+        display: block;
+        text-align: center;
+        color: white;
+        font-size: 20px;
+        font-weight: bold;
+      "
+    >
+      ค้นหาข้อมูลทะเบียนประวัติ
+    </span>
+
+    <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
+      <div
+        class="flex full-width items-center bg-white"
+        style="flex-grow: 1; border-radius: 0.5rem"
+      >
+        <q-icon
+          class="q-mx-md"
+          round
+          flat
+          color="grey"
+          name="search"
+          size="20px"
+          dense
+        />
+        <q-input
+          placeholder="ค้นหา"
+          v-model="search"
+          dense
+          style="flex-grow: 1"
+          borderless
+        />
+        <q-btn
+          class="q-mr-md"
+          outline
+          color="blue"
+          icon="filter_list"
+          dense
+          size="12px"
+        />
+      </div>
+      <q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
+    </div>
+  </div>
+</template>