client initial commit

Services/client/src/components/FileSearched.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useSearchDataStore } from '@/stores/searched-data'
+
+const { foundFile } = storeToRefs(useSearchDataStore())
+</script>
+
+<template>
+  <div class="q-mt-md" v-if="foundFile.length > 0">
+    <div class="q-gutter-md">
+      <div v-for="value in foundFile" :key="value.title" class="inline-block">
+        <div class="box border-radius-inherit">
+          <q-card flat @click="">
+            <q-card-section class="column justify-center relative q-px-xl">
+              <q-icon name="description" size="6em" color="primary" />
+              <span class="text-center q-pt-md">{{ value.title }}</span>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="q-mt-md" v-if="foundFile.length == 0">
+    <span>ไม่พบรายการที่ค้นหา</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.box {
+  display: inline-block;
+  border: 2px solid #f1f2f4;
+  border-radius: 8px;
+  cursor: pointer;
+}
+</style>