haditha_ui/pages/haditha/search/index.vue
2025-03-15 13:41:29 +03:30

179 lines
4.4 KiB
Vue

<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 total = ref(0);
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);
total.value = payload.res.hits.total.value;
state.searchList = payload.res.hits.hits;
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"
:total="total"
: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>