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

290 lines
8.7 KiB
Vue
Raw Normal View History

2025-03-03 12:27:33 +00:00
<script setup lang="ts">
2025-02-26 07:52:21 +00:00
const route = useRoute();
const router = useRouter();
definePageMeta({
layout: false,
name: "hadithLibraryShow",
});
useHead({
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ${route.params.slug}`,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
2025-03-03 12:27:33 +00:00
2025-02-26 07:52:21 +00:00
const props = defineProps({
list: {
default() {
return [];
},
},
noDataText: {
default: "نتیجه‌ای یافت نشد!",
},
noDataIcon: {
default: "/img/no-data.png",
},
});
2025-02-11 10:17:22 +00:00
2025-03-03 12:27:33 +00:00
const treeItems = [
{
title: "فصل اول",
icon: "lucide:plus",
children: [
{ title: "useAuth.ts", icon: "vscode-icons:file-type-typescript" },
{ title: "useUser.ts", icon: "vscode-icons:file-type-typescript" },
],
},
{
title: "فصل دوم",
icon: "lucide:plus",
children: [
{ title: "useAuth.ts", icon: "vscode-icons:file-type-typescript" },
{ title: "useUser.ts", icon: "vscode-icons:file-type-typescript" },
],
},
{
title: "فصل سوم",
icon: "lucide:plus",
children: [
{
title: "بخش اول",
icon: "lucide:plus",
children: [
{ title: "بخش اول-یک", icon: "vscode-icons:file-type-vue" },
{
title: "بخش اول-دو",
icon: "vscode-icons:file-type-vue",
children: [
{ title: "بخش اول-یک-یک", icon: "vscode-icons:file-type-vue" },
{ title: "بخش اول-یک-دو", icon: "vscode-icons:file-type-vue" },
],
},
],
},
{
title: "بخش دوم",
icon: "lucide:plus",
children: [
{ title: "Card.vue", icon: "vscode-icons:file-type-vue" },
{
title: "Button.vue",
icon: "vscode-icons:file-type-vue",
},
],
},
],
},
{ title: "فصل چهارم", icon: "vscode-icons:file-type-vue" },
{ title: "فصل پنجم", icon: "vscode-icons:file-type-nuxt" },
];
2025-02-26 07:52:21 +00:00
const isModalOpen = ref(false);
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
const onOpenList = () => {
console.info("onOpenList");
isModalOpen.value = true;
};
const onSearch = () => {
// console.info("onSearch");
};
const onClose = () => {
console.info("onClose");
router.push({
name: "hadithLibrary",
});
};
// components declaration
2025-03-03 12:27:33 +00:00
const HadithLayout = defineAsyncComponent(
() => import("@hadith/layouts/HadithLayout.vue")
2025-02-26 07:52:21 +00:00
);
2025-03-03 12:27:33 +00:00
const UTree = defineAsyncComponent(
() => import("@hadith/components/hadith/library-show/UTree.vue")
2025-02-26 07:52:21 +00:00
);
2025-03-03 12:27:33 +00:00
// const AccordionMenu = defineAsyncComponent(
// () => import("@hadith/components/hadith/library-show/AccordionMenu..vue")
// );
2025-02-26 07:52:21 +00:00
</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>
2025-02-11 10:17:22 +00:00
</div>
2025-02-26 07:52:21 +00:00
<div class="flex items-center">
<UButton
@click="onSearch"
class="my-trailing-button search p-0"
icon="i-lucide-search"
variant=""
size="xl"
2025-02-11 10:17:22 +00:00
>
2025-02-26 07:52:21 +00:00
</UButton>
<UButton
@click="onClose"
class="my-trailing-button close p-0 ms-8"
icon="i-lucide:x"
variant=""
size="xl"
2025-02-11 10:17:22 +00:00
>
2025-02-26 07:52:21 +00:00
</UButton>
2025-02-11 10:17:22 +00:00
</div>
</div>
2025-02-26 07:52:21 +00:00
<div class="separator"></div>
<div class="page-content py-14 p-2">
<h2>
عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: قَالَ
أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):
</h2>
<p>
إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ
لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ
بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ،
وَإِنَّمَا يُؤْمَنُ عَلَيْهِ لِيُدْخَلَ الْجَنَّة امام جعفر صادق
علیهالسلام:عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
قَالَ: قَالَ أَبُو عَبْدِ اللَّهِ إِنَّمَا يَدْرُسُ الْإِنسَانُ
لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ
لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ،
وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
</p>
<h2>امام جعفر صادق علیهالسلام:</h2>
<p>
عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: قَالَ
أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ): إِنَّمَا يَدْرُسُ
الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا
يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ،
وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
</p>
2025-02-11 10:17:22 +00:00
</div>
2025-02-26 07:52:21 +00:00
</UContainer>
2025-02-11 10:17:22 +00:00
</div>
2025-02-26 07:52:21 +00:00
<UModal
v-model:open="isModalOpen"
:dismissible="false"
:ui="{
footer: 'modal-footer',
overlay: 'modal-overlay',
2025-03-03 12:27:33 +00:00
content: 'modal-content accordion-menu h-10',
2025-02-26 07:52:21 +00:00
header: 'modal-header',
wrapper: 'modal-wrapper',
body: 'modal-body',
title: 'modal-title',
description: 'modal-description',
2025-02-27 09:48:59 +00:00
close: 'modal-close ring-[white]',
2025-02-26 07:52:21 +00:00
}"
title="فهرست"
:close="{
color: 'primary',
variant: 'outline',
class: 'rounded-full',
}"
>
<!-- <template #header></template> -->
<!-- <template #content></template> -->
<template #body>
2025-03-03 12:27:33 +00:00
<UTree :items="treeItems" />
<!-- <accordion-menu @close="isModalOpen = !isModalOpen"></accordion-menu> -->
2025-02-26 07:52:21 +00:00
</template>
<!-- <template #footer></template> -->
</UModal>
</HadithLayout>
</template>
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
<style scoped>
.page-container {
background: #f7fffd;
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
.page-inner-container {
/* width: 100%; */
/* max-width: 1200px; */
/* margin-right: auto; */
/* margin-left: auto; */
.page-header {
color: var(--ui-color-two);
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
.menu {
width: 24;
height: 24;
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
margin-left: 2.2em;
2025-02-11 10:17:22 +00:00
}
2025-02-26 07:52:21 +00:00
.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 */
2025-02-11 10:17:22 +00:00
}
}
2025-02-26 07:52:21 +00:00
.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%
);
2025-02-11 10:17:22 +00:00
}
2025-02-26 07:52:21 +00:00
.page-content {
/* margin: 1.5em; */
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
font-family: Takrim;
font-weight: 400;
font-size: 20px;
line-height: 40px;
letter-spacing: 0%;
text-align: right;
2025-02-11 10:17:22 +00:00
2025-02-26 07:52:21 +00:00
color: var(--ui-color-two);
2025-02-11 10:17:22 +00:00
}
}
}
</style>