haditha_ui/pages/hadith/library/[id]/[slug]/index.vue

<script setup>
const route = useRoute();
const router = useRouter();

definePageMeta({
  layout: false,
  name: "hadithLibraryShow",
});
useHead({
  name: "hadithLibraryShow",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ${route.params.slug}`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});
const props = defineProps({
  list: {
    default() {
      return [];
    },
  },
  noDataText: {
    default: "نتیجه‌ای یافت نشد!",
  },
  noDataIcon: {
    default: "/img/no-data.png",
  },
});

const isModalOpen = ref(false);

const onOpenList = () => {
  console.info("onOpenList");
  isModalOpen.value = true;
};
const onSearch = () => {
  // console.info("onSearch");
};
const onClose = () => {
  console.info("onClose");
  router.push({
    name: "hadithLibrary",
  });
};
// components declaration
const HadithLayout = defineAsyncComponent(() =>
  import("@hadith/layouts/HadithLayout.vue")
);
const AccordionMenu = defineAsyncComponent(() =>
  import("@hadith/components/hadith/library-show/AccordionMenu..vue")
);
</script>

<template>
  <HadithLayout>
    <div class="page-container h-full">
      <UContainer
        ui="{
          base: 'sm:px-6 lg:px-4',
        }"
        class="page-inner-container sm:px-6 lg:px-4"
      >
        <div class="page-header py-4 flex justify-between items-center">
          <div class="flex items-center">
            <UButton
              class="menu p-1 me-8"
              @click="onOpenList"
              icon="i-lucide-menu"
              variant=""
            />

            <h1 class="m-0 title">
              {{ route.params.slug }}
            </h1>
          </div>

          <div class="flex items-center">
            <UButton
              @click="onSearch"
              class="my-trailing-button search p-0"
              icon="i-lucide-search"
              variant=""
              size="xl"
            >
            </UButton>

            <UButton
              @click="onClose"
              class="my-trailing-button close p-0 ms-8"
              icon="i-lucide:x"
              variant=""
              size="xl"
            >
            </UButton>
          </div>
        </div>
        <div class="separator"></div>

        <div class="page-content py-14 p-2">
          <h2>
            عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: قَالَ
            أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):
          </h2>
          <p>
            إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ
            لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ
            بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ،
            وَإِنَّمَا يُؤْمَنُ عَلَيْهِ لِيُدْخَلَ الْجَنَّة امام جعفر صادق
            علیه‌السلام:عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
            قَالَ: قَالَ أَبُو عَبْدِ اللَّهِ إِنَّمَا يَدْرُسُ الْإِنسَانُ
            لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ
            لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ،
            وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
            عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
          </p>

          <h2>امام جعفر صادق علیه‌السلام:</h2>
          <p>
            عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: قَالَ
            أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ): إِنَّمَا يَدْرُسُ
            الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا
            يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ،
            وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
            عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
          </p>
        </div>
      </UContainer>
    </div>

    <UModal
      v-model:open="isModalOpen"
      :dismissible="false"
      :ui="{
        footer: 'modal-footer',
        overlay: 'modal-overlay',
        content: 'modal-content',
        header: 'modal-header',
        wrapper: 'modal-wrapper',
        body: 'modal-body',
        title: 'modal-title',
        description: 'modal-description',
        close: 'modal-close',
      }"
      title="فهرست"
      :close="{
        color: 'primary',
        variant: 'outline',
        class: 'rounded-full',
      }"
    >
      <UButton label="Open" color="neutral" variant="subtle" />
      <!-- <template #header></template> -->
      <!-- <template #content></template> -->
      <template #body>
        <accordion-menu @close="isModalOpen = !isModalOpen"></accordion-menu>
      </template>
      <!-- <template #footer></template> -->
    </UModal>
  </HadithLayout>
</template>

<style scoped>
.page-container {
  background: #f7fffd;

  .page-inner-container {
    /* width: 100%; */
    /* max-width: 1200px; */
    /* margin-right: auto; */
    /* margin-left: auto; */
    .page-header {
      color: var(--ui-color-two);

      .menu {
        width: 24;
        height: 24;

        margin-left: 2.2em;
      }
      .title {
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: right;

        /* Fallback color */
        color: #4d00ff;

        /* Gradient background */
        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);

        /* Clip the background to the text */
        background-clip: text;
        -webkit-background-clip: text; /* For Safari */

        /* Make the text transparent */
        color: transparent;
        -webkit-text-fill-color: transparent; /* For Safari */
      }
    }
    .separator {
      /* border: 0.5px solid #eee; */
      height: 1px;
      background-position: center center;
      background-size: contain;

      background-image: linear-gradient(
        90deg,
        #ffffff 0%,
        #a0f5ff 30.4%,
        #3fc9fa 71.47%,
        #a7ffe7 100%
      );
    }
    .page-content {
      /* margin: 1.5em; */

      font-family: Takrim;
      font-weight: 400;
      font-size: 20px;
      line-height: 40px;
      letter-spacing: 0%;
      text-align: right;

      color: var(--ui-color-two);
    }
  }
}
</style>