haditha_ui/pages/haditha/search/index.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 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>