public/themes/karen/modules/article-bar.html.twig line 1

Open in your IDE?
  1. {% set articles = getArticles({} , 'latest',10) %}
  2.         {% if articles|length > 0 %}
  3. <section class="mx-4 lg:container mt-10 lg:mt-20">
  5.     <div class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">
  6.         <div class="flex items-center gap-x-2 sm:gap-x-4">
  7.                     <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">
  8.                         <svg class="size-7 text-gray-700 dark:text-gray-100">
  9.                             <use href="#check-badge"></use>
  10.                         </svg>
  11.                     </span>
  12.             <div class="space-y-1 md:space-y-1">
  13.                 <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">محبوب‌ترین
  14.                     <span class="text-blue-600 dark:text-blue-500">مقالات</span>
  15.                 </h3>
  16.                 <p class="text-sm text-gray-500 dark:text-gray-300">جدیدترین و بروزترین مقالات</p>
  17.             </div>
  18.         </div>
  19.         <div class="w-full xs:w-auto flex justify-between xs:justify-end  items-center gap-x-2">
  20.             <div class="flex items-center gap-x-2">
  21.                 <button class="slider-navigate_btn articleSlider-prev-slide">
  22.                     <svg class="size-6 -rotate-90">
  23.                         <use href="#chevron"/>
  24.                     </svg>
  25.                 </button>
  26.                 <button class="slider-navigate_btn articleSlider-next-slide">
  27.                     <svg class="size-6 rotate-90">
  28.                         <use href="#chevron"/>
  29.                     </svg>
  30.                 </button>
  31.             </div>
  32.             <a href="{{ path('app_shop_site_blog') }}"
  33.                class="group shadow-xl text-sm md:text-base flex gap-x-1.5 items-center px-2 h-10 md:px-3 text-white bg-blue-600 rounded-xl">
  34.                 <p>مشاهده همه</p>
  35.                 <span
  36.                         class="w-7 h-7 rounded-full bg-blue-500 flex-center md:group-hover:-translate-x-1 transition-transform duration-300">
  37.                             <svg class="size-5">
  38.                                 <use href="#arrow"/>
  39.                             </svg>
  40.                         </span>
  41.             </a>
  42.         </div>
  43.     </div>
  44.     <div class="swiper articleSlider w-full mt-5">
  45.         <div class="swiper-wrapper w-full py-5">
  46.             {% for item in articles  %}
  47.                 <div class="swiper-slide group article-box">
  48.                     <div class="relative overflow-hidden rounded-lg">
  49.                         <img src="{{ path('app_cdn_path' , {'path' :item.imageUrl }) }}" class="article-box_img" alt="{{ item.title }}"/>
  50.                         <div
  51.                                 class="absolute opacity-0 left-0 top-0 bottom-0 right-0 bg-black/60 flex items-center justify-center group-hover:opacity-100 duration-300 transition-all rounded-bl-3xl rounded-tr-3xl">
  52.                             <a href="{{ path('app_shop_site_blog_single' , {'urlSlug' : item.urlSlug}) }}"
  53.                                class="flex items-center px-2 py-1 gap-x-1 font-DanaMedium rounded-lg border-2 border-white text-white">
  54.                                 <p>ادامه مطالب</p>
  55.                                 <svg class="w-4 h-4 rotate-90">
  56.                                     <use href="#chevron"></use>
  57.                                 </svg>
  58.                             </a>
  59.                         </div>
  60.                     </div>
  61.                     <div class="flex flex-col gap-y-1 py-5 px-1">
  62.                         <h2 class="font-DanaDemiBold"> {{ item.title }} </h2>
  63.                     </div>
  64.                     <span class="flex w-full h-1 py-1 border-t border-gray-100 dark:border-white/10"></span>
  65.                     <div class="flex items-center justify-between text-sm px-1">
  66.                             <span class="flex items-center gap-x-1 text-blue-500 dark:text-sky-400">
  67.                                 <svg class="w-4 h-4">
  68.                                     <use href="#calendar"></use>
  69.                                 </svg>
  70.                                 <p class="mt-1">       {{ item.createdAt|persianDate }}</p>
  71.                             </span>
  72. {#                        <span class="flex items-start gap-x-1 text-gray-300">#}
  73. {#                                <p class="font-DanaDemiBold">120</p>#}
  74. {#                                <svg class="w-4 h-4">#}
  75. {#                                    <use href="#eye"></use>#}
  76. {#                                </svg>#}
  77. {#                            </span>#}
  78.                     </div>
  79.                 </div>
  80.             {% endfor %}
  81.         </div>
  82.     </div>
  83. </section>
  84. {% endif %}