haditha_ui/components/hadith/search-page/SearchShow.vue

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