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

235 lines
7.1 KiB
Vue
Raw Normal View History

2025-02-26 07:52:21 +00:00
<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",
},
});
2025-02-11 10:17:22 +00:00
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
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>
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',
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>
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>