<script setup> const props = defineProps({ selectedItem: { type: Object, default() { return {}; }, }, }); const emit = defineEmits(["close"]); // const open = ref(false); const closeModal = () => { emit("close"); }; </script> <template> <div class="search-show-modal"> <div class="body-header"> <span class="top-left-bgi z-0"></span> <div class="modal-title flex justify-between"> <NuxtImg fit="auto" quality="80" placeholder src="/img/haditha-title.svg" /> <UButton icon="i-lucide:x" color="neutral" variant="ghost" class="close-btn" @click="closeModal" /> </div> </div> <div class="body-content"> <div class="h-full flex flex-col justify-center z-2"> <div class="bg-container h-full"> <div class="header flex"> <UButton variant="solid" class="bookmark-btn" icon="i-lucide-bookmark" > </UButton> <div class="referene"> <span> نشانی: </span> الکافی، جلد ۱، صفحه ۱۰۳ </div> </div> <div class="content"> <div class="search-item"> <div class="text-arabic-section"> <div class="section-header"> <span class="section-title">امام جعفر صادق علیهالسلام </span> <UButton variant="ghost" class="copy-btn" label="کپی" /> </div> <div class="arabic-text"> <p> عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: </p> <p>قَالَ أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):</p> <p> إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ </p> </div> </div> <div class="separator"></div> <div class="text-persian-section"> <div class="section-header"> <span class="section-title"> ترجمه </span> <UButton variant="ghost" class="copy-btn" label="کپی" /> </div> <p class="from">امام جعفر صادق علیهالسلام:</p> <p class="persian-text"> انسان دانش میآموزد تا بداند، و میداند تا عمل کند، و عمل میکند تا به سبب آن شناخته شود، و شناخته میشود تا (عمل او) پذیرفته گردد، و پذیرفته میشود تا در امان قرار گیرد، و در امان قرار میگیرد تا وارد بهشت شود. </p> </div> <div class="separator"></div> <div class="text-description-section"> <div class="section-header"> <span class="section-title"> شرح </span> <UButton variant="ghost" class="copy-btn" label="کپی" /> </div> <p class="description-item"> این حدیث به سلسله مراتب علم و عمل اشاره دارد و تأکید میکند که علم باید به عمل منتهی شود و عمل نیز باید با نیت خالص و برای رضای خداوند باشد تا مورد قبول واقع شود و انسان را به سعادت ابدی برساند. </p> <p class="description-item"> این حدیث به سلسله مراتب علم و عمل اشاره دارد و تأکید میکند که علم باید به عمل منتهی شود و عمل نیز باید با نیت خالص و برای رضای خداوند باشد تا مورد قبول واقع شود و انسان را به سعادت ابدی برساند. </p> </div> </div> </div> </div> </div> </div> <div class="body-footer"> <div class="mt-5 z-2"> <div class="flex justify-between actions"> <UButton class="similar-btn" icon="i-lucide-search" label="مشابه" color="neutral" variant="outline" /> <UButton class="explore-btn" trailing-icon="i-lucide-bot-message-square" label="کاوش" variant="solid" /> </div> <div class="flex justify-between pagination"> <UButton class="prev-hadith" label="حدیث قبل" color="" variant="soft" icon="i-lucide-chevron-right" /> <UButton class="next-hadith" label="حدیث بعد" color="" variant="soft" trailing-icon="i-lucide-chevron-left" /> </div> </div> </div> </div> </template> <!-- because of the buttons, using without scoped. --> <style> .search-show-modal { .body-header { .modal-title { padding: 0 0.5em 1.5em; margin-bottom: 2.5em; .close-btn { color: var(--ui-color-two); /* width: 24px; */ /* height: 24px; */ padding: 0.2em; background-color: transparent; } } } .body-content { .header { .bookmark-btn { width: 49px; height: 32px; gap: 4px; border-radius: 6px; border-width: 0.5px; padding-top: 4px; padding-right: 12px; padding-bottom: 4px; padding-left: 12px; border: 0.5px solid #d9d9d9; background: #ffffff; display: flex; justify-content: center; align-items: center; span { /* width: 19; */ /* height: 21; */ background: #29d985; } } .referene { margin-right: 0.5em; width: 182; height: 32; gap: 4px; border-radius: 6px; border-width: 0.5px; padding-top: 4px; padding-right: 12px; padding-bottom: 4px; padding-left: 12px; background: #ffffff; border: 0.5px solid #d9d9d9; font-family: IRANSansX; font-weight: 300; font-size: 12px; line-height: 18px; letter-spacing: 0%; text-align: right; color: #8a92a8; display: flex; align-items: center; span { margin-left: 0.1em; font-family: IRANSansX; font-weight: 300; font-size: 12px; line-height: 18px; letter-spacing: 0%; text-align: right; color: #4d00ff; } } } .content { height: calc(100dvh - 29em); overflow-y: auto; .search-item { padding: 1em 0 1em 0.1em; .section-header { display: flex; justify-content: space-between; text-align: right; margin-bottom: 0.5em; .section-title { font-family: IRANSansX; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: 0%; text-align: right; /* Fallback color */ color: #4be8ae; /* Gradient background */ background-image: linear-gradient( 102.02deg, #4be8ae 7.38%, #00a762 91.78% ); /* 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 */ } .copy-btn { padding: 0.2em 1em; /* width: 44px; */ /* height: 24px; */ gap: 4px; border-radius: 6px; border-width: 0.5px; padding-top: 4px; padding-right: 12px; padding-bottom: 4px; padding-left: 12px; background: #ffffff; border: 0.5px solid #d9d9d9; font-family: IRANSansX; font-weight: 300; font-size: 12px; line-height: 18px; letter-spacing: 0%; text-align: right; color: #8a92a8; } } .text-arabic-section { padding: 2em 0; .arabic-text { font-family: Takrim; font-weight: 400; font-size: 18px; line-height: 32px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); margin-bottom: 0.5em; } } .text-persian-section { padding: 2em 0; .section-header { } .from, .persian-text { font-family: Takrim; font-weight: 400; font-size: 18px; line-height: 30px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); } /* .persian-text { font-family: Takrim; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0%; text-align: right; color: #626b84; margin-bottom: 0.5em; } */ } .text-description-section { padding: 2em 0; .description-item { font-family: Takrim; font-weight: 400; font-size: 18px; line-height: 30px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); /* height: 24px; gap: 4px; padding-top: 4px; padding-right: 8px; padding-bottom: 4px; padding-left: 8px; border-radius: 6px; border-width: 0.5px; border: 0.5px solid #d9d9d9; font-family: IRANSansX; font-weight: 300; font-size: 10px; line-height: 15px; letter-spacing: 0%; text-align: right; color: #8a92a8; */ } } .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% ); } } } } .body-footer { .actions { margin-bottom: 1em; .similar-btn { width: 114; height: 56; gap: 8px; border-radius: 12px; border-width: 0.5px; padding-top: 8px; padding-right: 20px; padding-bottom: 8px; padding-left: 24px; background: #ffffff; border: 0.5px solid; border-image-source: linear-gradient( 102.02deg, #4be8ae 7.38%, #00a762 91.78% ); box-shadow: 0px 8px 20px 0px #0000001a; font-family: IRANSansX; font-weight: 400; font-size: 15px; line-height: 22.5px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); } .explore-btn { width: 118; height: 56; gap: 4px; border-radius: 12px; padding-top: 8px; padding-right: 24px; padding-bottom: 8px; padding-left: 20px; background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%); box-shadow: 0px 8px 20px 0px #0000001a; font-family: IRANSansX; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0%; text-align: right; color: #fff; } } .pagination { padding: 0.7em 0px; /* width: 672; */ /* height: 56; */ justify-content: space-between; border-radius: 16px; border-width: 0.3px; padding-right: 32px; padding-left: 32px; background: #ffffff; border: 0.3px solid #e0e0e0; box-shadow: 0px 8px 20px 0px #0000001a; .prev-hadith { font-family: IRANSansX; font-weight: 300; font-size: 12px; line-height: 20px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); } .next-hadith { font-family: IRANSansX; font-weight: 300; font-size: 12px; line-height: 20px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); } } } } </style>