290 lines
8.7 KiB
Vue
290 lines
8.7 KiB
Vue
<script setup lang="ts">
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
definePageMeta({
|
||
layout: false,
|
||
name: "hadithaLibraryShow",
|
||
});
|
||
useHead({
|
||
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/haditha/no-data.png",
|
||
},
|
||
});
|
||
|
||
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" },
|
||
];
|
||
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 HadithaLayout = defineAsyncComponent(
|
||
() => import("@haditha/layouts/HadithaLayout.vue")
|
||
);
|
||
const UTree = defineAsyncComponent(
|
||
() => import("@haditha/components/haditha/library-show/UTree.vue")
|
||
);
|
||
// const AccordionMenu = defineAsyncComponent(
|
||
// () => import("@haditha/components/haditha/library-show/AccordionMenu..vue")
|
||
// );
|
||
</script>
|
||
|
||
<template>
|
||
<HadithaLayout>
|
||
<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 accordion-menu h-10',
|
||
header: 'modal-header',
|
||
wrapper: 'modal-wrapper',
|
||
body: 'modal-body',
|
||
title: 'modal-title',
|
||
description: 'modal-description',
|
||
close: 'modal-close ring-[white]',
|
||
}"
|
||
title="فهرست"
|
||
:close="{
|
||
color: 'primary',
|
||
variant: 'outline',
|
||
class: 'rounded-full',
|
||
}"
|
||
>
|
||
<!-- <template #header></template> -->
|
||
<!-- <template #content></template> -->
|
||
<template #body>
|
||
<UTree :items="treeItems" />
|
||
<!-- <accordion-menu @close="isModalOpen = !isModalOpen"></accordion-menu> -->
|
||
</template>
|
||
<!-- <template #footer></template> -->
|
||
</UModal>
|
||
</HadithaLayout>
|
||
</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>
|