haditha_ui/pages/haditha/favorites/index.vue

<script setup>
definePageMeta({
  layout: false,
  name: "hadithaFavorites",
});
useHead({
  name: "hadithaFavorites",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ذخیره ها`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});

const HadithaLayout = defineAsyncComponent(() =>
  import("@haditha/layouts/HadithaLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
  import("@haditha/components/haditha/NavigationMenu.vue")
);

const SearchList = defineAsyncComponent(() =>
  import("@haditha/components/haditha/search-page/SearchList.vue")
);

const state = reactive({
  searchList: new Array(5).fill(0),
});
</script>

<template>
  <HadithaLayout>
    <div class="h-full flex flex-col justify-center">
      <div class="bg-container h-full">
        <navigation-menu></navigation-menu>

        <div class="text-logo">
          <div class="search-box-container pb-0 flex justify-center">
            <search-list
              no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
              no-data-icon="/img/haditha/save.png"
              :list="state.searchList"
            ></search-list>
          </div>
        </div>
      </div>
    </div>
  </HadithaLayout>
</template>

<style scoped>
.bg-container {
  min-height: 100%;
  /* height: 100dvh; */
  background-size: cover;
  background-repeat: no-repeat;
  background: #f7fffd;
}

.text-logo {
  padding-top: 4.5em;
  position: relative;
}

.search-box-container {
  padding-top: 0.7em;
  padding-bottom: 4em; /*64px */

  &.pb-0 {
    padding-bottom: 0 !important;
  }
}
</style>