haditha_ui/pages/haditha/library/[id]/[slug]/index.vue
mustafa-rezae 953d98f3be Rename files.
Add svg icons
2025-03-06 14:58:20 +03:30

290 lines
8.7 KiB
Vue
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>