dlearn-front/components/product-page/course-details/Header.vue

<template>
  <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
    <NuxtImg
      :placeholder="[30, 20]"
      :src="props?.props?.image"
      alt="html"
      class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
    />
    <div class="mt-[14vw] ms-[9.5vw] z-[1] text-white">
      <h1 class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]">
        {{ props?.props?.name }}
      </h1>
      <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
        {{ props?.props?.categories[0]?.name }}
      </p>
      <div
      v-html="describe"
        class="descriptios hidden md:block w-[39.896vw] text-[1.055vw] leading-[1.582vw] mt-[1.2vw]"
      ></div>
      <p
        class="text-[2.836vw] md:text-[0.741vw] text-[##E5E5E5] mt-[1.8vw] absolute bottom-[8vw] md:bottom-auto md:relative"
      >
        مدرس دوره :
        <span class="text-[3.59vw] md:text-[1.055vw] text-white ms-[1vw]"
          >{{props?.props?.teacher?.name}}</span
        >
      </p>
      <div
        class="w-[39.896vw] mt-[3.2vw] flex flex-col md:flex-row justify-between absolute left-0 bottom-[8vw] md:bottom-auto md:relative space-y-[2vw] md:space-y-0"
      >
        <div class="flex gap-[1vw] items-center">
          <svg
            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
            viewBox="0 0 37 37"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.3335 3.08331V7.70831"
              stroke="white"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M24.6665 3.08331V7.70831"
              stroke="white"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M5.396 14.0137H31.6043"
              stroke="white"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M32.375 13.1041V26.2083C32.375 30.8333 30.0625 33.9166 24.6667 33.9166H12.3333C6.9375 33.9166 4.625 30.8333 4.625 26.2083V13.1041C4.625 8.47915 6.9375 5.39581 12.3333 5.39581H24.6667C30.0625 5.39581 32.375 8.47915 32.375 13.1041Z"
              stroke="white"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M24.196 21.1209H24.2098"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M24.196 25.7459H24.2098"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M18.4928 21.1209H18.5067"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M18.4928 25.7459H18.5067"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12.7873 21.1209H12.8011"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12.7873 25.7459H12.8011"
              stroke="white"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <div class="space-y-[0.3vw]">
            <p class="text-[3.59vw] md:text-[1.055vw]">آخرین بروزرسانی</p>
            <p class="text-[2.518vw] md:text-[0.741vw]">{{jDate(props?.props?.updatedAt)}}</p>
          </div>
        </div>
        <div class="border-l"></div>
        <div class="flex gap-[1vw] items-center">
          <svg
            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
            viewBox="0 0 37 37"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M33.9168 18.5C33.9168 27.01 27.0102 33.9166 18.5002 33.9166C9.99016 33.9166 3.0835 27.01 3.0835 18.5C3.0835 9.98998 9.99016 3.08331 18.5002 3.08331C27.0102 3.08331 33.9168 9.98998 33.9168 18.5Z"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M24.2197 23.4025L19.4405 20.5504C18.608 20.0571 17.9297 18.87 17.9297 17.8988V11.5779"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <div class="space-y-[0.3vw]">
            <p class="text-[3.59vw] md:text-[1.055vw]">مدت زمان دوره</p>
            <p class="text-[2.518vw] md:text-[0.741vw]">
              {{ props?.props?.duration }} ساعت
            </p>
          </div>
        </div>
        <div class="border-l"></div>
        <div class="flex gap-[1vw] items-center">
          <svg
            class="h-[6.667vw] md:h-[1.927vw] w-[6.667vw] md:w-[1.927vw]"
            viewBox="0 0 37 37"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M14.1215 16.7579C13.9673 16.7425 13.7823 16.7425 13.6127 16.7579C9.94353 16.6346 7.02979 13.6283 7.02979 9.92831C7.02979 6.15123 10.0823 3.08331 13.8748 3.08331C17.6519 3.08331 20.7198 6.15123 20.7198 9.92831C20.7044 13.6283 17.7906 16.6346 14.1215 16.7579Z"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M25.2986 6.16669C28.2894 6.16669 30.6944 8.5871 30.6944 11.5625C30.6944 14.4763 28.3819 16.8504 25.499 16.9584C25.3756 16.9429 25.2369 16.9429 25.0981 16.9584"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M6.41336 22.4467C2.68253 24.9442 2.68253 29.0142 6.41336 31.4963C10.6529 34.3329 17.6059 34.3329 21.8454 31.4963C25.5763 28.9988 25.5763 24.9288 21.8454 22.4467C17.6213 19.6254 10.6684 19.6254 6.41336 22.4467Z"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M28.2739 30.8333C29.3839 30.6021 30.4323 30.155 31.2956 29.4921C33.7006 27.6883 33.7006 24.7129 31.2956 22.9091C30.4477 22.2616 29.4148 21.83 28.3202 21.5833"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <div class="space-y-[0.3vw]">
            <p class="text-[3.59vw] md:text-[1.055vw]">
              {{ props?.props?.studentsCount }}
            </p>
            <p class="text-[2.518vw] md:text-[0.741vw]">دانشجو</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(["props"]);
import {jDate} from "@/utils/jDate"


    function hideEndOfString(inputString) {
      const words = inputString.split(" ");
      if (words.length > 50) {
        const truncatedWords = words.slice(0, 30);
        return truncatedWords.join(" ") + "...";
      } else {
        return inputString;
      }
    }
    const describe = hideEndOfString(props?.props?.description);

</script>