<script setup> definePageMeta({ layout: false, name: "hadithaSearch", }); useHead({ name: "hadithaSearch", title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`, meta: [ { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" }, ], bodyAttrs: { class: import.meta.env.VITE_HADITH_SYSTEM, }, }); const img = useImage(); const searchQuery = ref(""); const state = reactive({ searchList: [], }); const backgroundImageStyle = computed(() => { // Use $img to generate an optimized image URL let optimizedImageUrl = img("/img/haditha/background.png", { quality: 40, }); if (searchQuery.value?.length) { optimizedImageUrl = img("/img/haditha/sub-header-bgi.png", { quality: 80, }); return { backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`, }; } return { backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`, }; }); const renderContent = (payload) => { console.info(payload); state.searchList = payload.searchList; searchQuery.value = payload.searchQuery; }; // components declaration const HadithaLayout = defineAsyncComponent(() => import("@haditha/layouts/HadithaLayout.vue") ); const NavigationMenu = defineAsyncComponent(() => import("@haditha/components/haditha/NavigationMenu.vue") ); const AutoComplation = defineAsyncComponent(() => import("@haditha/components/haditha/AutoComplation.vue") ); const SearchList = defineAsyncComponent(() => import("@haditha/components/haditha/search-page/SearchList.vue") ); </script> <template> <HadithaLayout> <div class="h-full flex flex-col justify-center"> <div class="background-image h-full" :style="backgroundImageStyle"> <navigation-menu></navigation-menu> <div class="logo-container"> <div class="search-box-container flex justify-center" :class="{ 'pb-0': state.searchList.length }" > <auto-complation :showFilter="true" class="search-page" @responseReady="renderContent" ></auto-complation> </div> <div v-if="searchQuery?.length == 0" class="flex justify-center flex-col items-center" > <NuxtImg fit="auto" quality="80" placeholder src="/img/haditha/logo.png" /> <div class="title"> کاوش با <span class="badge-style"> هوش مصنوعی </span> در احادیث اسلامی </div> </div> <!-- <no-data class="h-full" v-if="searchQuery?.length && state.searchList?.length == 0" > <NuxtImg fit="auto" quality="80" placeholder src="/img/haditha/no-data.png" /> <p class="no-data-text">نتیجهای یافت نشد!</p> </no-data> --> <div v-if="searchQuery?.length && state.searchList?.length" class="search-box-container pb-0 bg-white flex justify-center" > <search-list no-data-text="نتیجهای یافت نشد!" no-data-icon="/img/haditha/no-data.png" :list="state.searchList" ></search-list> </div> </div> </div> </div> </HadithaLayout> </template> <style scoped> .background-image { min-height: 100%; /* height: 100dvh; */ background-size: auto; background-repeat: no-repeat; } .logo-container { padding-top: 4.5em; position: relative; .title { margin-top: 3.5em; font-family: IRANSansX; font-size: 14px; line-height: 21px; letter-spacing: 0%; text-align: center; color: var(--ui-color-two); } .badge-style { width: 100; height: 23; border-radius: 40px; padding-right: 8px; padding-bottom: 2px; padding-left: 8px; gap: 10px; color: #fff; background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%); } } .search-box-container { padding-top: 0.7em; padding-bottom: 4em; /*64px */ &.pb-0 { padding-bottom: 0 !important; } } </style>