haditha_ui/pages/haditha/search/index.vue

168 lines
4.3 KiB
Vue
Raw Normal View History

2025-02-18 12:56:13 +00:00
<script setup>
definePageMeta({
layout: false,
2025-03-06 11:28:20 +00:00
name: "hadithaSearch",
2025-02-18 12:56:13 +00:00
});
useHead({
2025-03-06 11:28:20 +00:00
name: "hadithaSearch",
2025-02-18 12:56:13 +00:00
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
const img = useImage();
2025-02-22 13:07:20 +00:00
const searchQuery = ref("");
const state = reactive({
searchList: [],
});
2025-02-18 12:56:13 +00:00
const backgroundImageStyle = computed(() => {
// Use $img to generate an optimized image URL
2025-03-06 11:28:20 +00:00
let optimizedImageUrl = img("/img/haditha/background.png", {
2025-03-03 12:27:33 +00:00
quality: 40,
2025-02-18 12:56:13 +00:00
});
2025-02-22 13:07:20 +00:00
if (searchQuery.value?.length) {
2025-03-06 11:28:20 +00:00
optimizedImageUrl = img("/img/haditha/sub-header-bgi.png", {
2025-02-22 13:07:20 +00:00
quality: 80,
});
return {
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
};
}
2025-02-18 12:56:13 +00:00
return {
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
};
});
2025-02-22 13:07:20 +00:00
const renderContent = (payload) => {
console.info(payload);
state.searchList = payload.searchList;
searchQuery.value = payload.searchQuery;
};
2025-02-26 07:52:21 +00:00
// components declaration
2025-03-06 11:28:20 +00:00
const HadithaLayout = defineAsyncComponent(() =>
import("@haditha/layouts/HadithaLayout.vue")
2025-02-26 07:52:21 +00:00
);
const NavigationMenu = defineAsyncComponent(() =>
2025-03-06 11:28:20 +00:00
import("@haditha/components/haditha/NavigationMenu.vue")
2025-02-26 07:52:21 +00:00
);
const AutoComplation = defineAsyncComponent(() =>
2025-03-06 11:28:20 +00:00
import("@haditha/components/haditha/AutoComplation.vue")
2025-02-26 07:52:21 +00:00
);
const SearchList = defineAsyncComponent(() =>
2025-03-06 11:28:20 +00:00
import("@haditha/components/haditha/search-page/SearchList.vue")
2025-02-26 07:52:21 +00:00
);
2025-02-18 12:56:13 +00:00
</script>
2025-02-11 10:17:22 +00:00
2025-02-18 12:56:13 +00:00
<template>
2025-03-06 11:28:20 +00:00
<HadithaLayout>
2025-02-22 13:07:20 +00:00
<div class="h-full flex flex-col justify-center">
2025-02-26 07:52:21 +00:00
<div class="background-image h-full" :style="backgroundImageStyle">
2025-02-18 12:56:13 +00:00
<navigation-menu></navigation-menu>
2025-02-26 07:52:21 +00:00
<div class="logo-container">
2025-02-22 13:07:20 +00:00
<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>
2025-02-11 10:17:22 +00:00
</div>
2025-02-22 13:07:20 +00:00
<div
v-if="searchQuery?.length == 0"
class="flex justify-center flex-col items-center"
>
2025-03-06 11:28:20 +00:00
<NuxtImg fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
2025-02-18 12:56:13 +00:00
<div class="title">
کاوش با
<span class="badge-style"> هوش مصنوعی </span>
در احادیث اسلامی
2025-02-11 10:17:22 +00:00
</div>
</div>
2025-02-22 13:07:20 +00:00
2025-02-26 07:52:21 +00:00
<!-- <no-data
2025-02-22 13:07:20 +00:00
class="h-full"
v-if="searchQuery?.length && state.searchList?.length == 0"
>
<NuxtImg
fit="auto"
quality="80"
placeholder
2025-03-06 11:28:20 +00:00
src="/img/haditha/no-data.png"
2025-02-22 13:07:20 +00:00
/>
<p class="no-data-text">نتیجهای یافت نشد!</p>
2025-02-26 07:52:21 +00:00
</no-data> -->
2025-02-22 13:07:20 +00:00
<div
v-if="searchQuery?.length && state.searchList?.length"
class="search-box-container pb-0 bg-white flex justify-center"
>
2025-02-26 07:52:21 +00:00
<search-list
no-data-text="نتیجه‌ای یافت نشد!"
2025-03-06 11:28:20 +00:00
no-data-icon="/img/haditha/no-data.png"
2025-02-26 07:52:21 +00:00
:list="state.searchList"
></search-list>
2025-02-22 13:07:20 +00:00
</div>
2025-02-11 10:17:22 +00:00
</div>
</div>
</div>
2025-03-06 11:28:20 +00:00
</HadithaLayout>
2025-02-11 10:17:22 +00:00
</template>
2025-02-18 12:56:13 +00:00
<style scoped>
2025-02-26 07:52:21 +00:00
.background-image {
2025-02-22 13:07:20 +00:00
min-height: 100%;
/* height: 100dvh; */
2025-02-26 07:52:21 +00:00
background-size: auto;
2025-02-18 12:56:13 +00:00
background-repeat: no-repeat;
2025-02-11 10:17:22 +00:00
}
2025-02-26 07:52:21 +00:00
.logo-container {
2025-02-18 12:56:13 +00:00
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;
2025-02-26 07:52:21 +00:00
color: var(--ui-color-two);
2025-02-11 10:17:22 +00:00
}
2025-02-18 12:56:13 +00:00
.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%);
2025-02-11 10:17:22 +00:00
}
}
2025-02-18 12:56:13 +00:00
.search-box-container {
2025-02-22 13:07:20 +00:00
padding-top: 0.7em;
2025-02-18 12:56:13 +00:00
padding-bottom: 4em; /*64px */
2025-02-22 13:07:20 +00:00
&.pb-0 {
padding-bottom: 0 !important;
}
}
2025-02-11 10:17:22 +00:00
</style>