105 lines
5.4 KiB
PHP
105 lines
5.4 KiB
PHP
@props(['blogs', 'title', 'slug' , 'parent'])
|
|
<div class=" lg:border-0 w-full ">
|
|
@if (request()->is('CategoryBlog/*'))
|
|
<div href="#" class=" text-[#16205b] my-3 flex font-bold lg:my-8 text-[16px] lg:text-[20px] text-start items-center gap-2">
|
|
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px] "> </div> <span class="text-[#16205b]"> مطالب {{$title}}</span>
|
|
</div>
|
|
@else
|
|
<div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
|
|
@if (!is_null($parent))
|
|
@php
|
|
$parent_nameFa = App\Models\Category::where('slug' , $parent)->where('parent' , 1)->first()->title;
|
|
@endphp
|
|
<span class="font-bold flex items-center gap-2 text-[#16205b] ">
|
|
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px] "> </div>
|
|
{{$parent_nameFa}} {{$title}}
|
|
</span>
|
|
@else
|
|
<span class="font-bold flex items-center gap-2 text-[#16205b] ">
|
|
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px] "> </div>
|
|
مطالب {{$title}}
|
|
</span>
|
|
@endif
|
|
@if (!is_null($parent))
|
|
<a class=" text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px] " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $parent , 'slug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>
|
|
|
|
@else
|
|
<a class=" text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px] " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>
|
|
|
|
@endif
|
|
</div>
|
|
@endif
|
|
<div x-data="blogList" x-intersect="shown = true">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8" x-show="shown" x-transition>
|
|
@foreach ($blogs as $index => $blog)
|
|
<div x-show="{{$index }} < limit" class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
|
|
<img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none" src="{{ asset('images/' . $blog->image) }}" alt="">
|
|
</a>
|
|
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="md:block hidden text-[#16205b]">
|
|
@php
|
|
$preview = Str::limit($blog->preview, 80, '...');
|
|
@endphp
|
|
{!! $preview !!}
|
|
</div>
|
|
<div class="flex gap-1 text-white md:mt-auto">
|
|
<div class="hidden md:flex flex-col justify-center">
|
|
<img class="bg-cover bg-center rounded-full size-8" src="{{ asset('image/'.$blog->user->picture) }}" alt="">
|
|
</div>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ $blog->user->full_name }}
|
|
</div>
|
|
<span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
|
|
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
|
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@if (request()->is('CategoryBlog/*'))
|
|
<button class="w-full p-3 mb-6 md:hidden block rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر
|
|
</button>
|
|
@else
|
|
@if (!is_null($parent))
|
|
<a href=" {{cleanRouteUrl('CategoryBlog.index' , ['categoryunderparentslug' => $parent , 'slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر
|
|
</a>
|
|
@else
|
|
<a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
|
مشاهده مطالب بیشتر
|
|
</a>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
@script
|
|
<script>
|
|
Alpine.data('blogList', () => ({
|
|
limit: 4,
|
|
shown: false,
|
|
init() {
|
|
this.updateLimit();
|
|
window.addEventListener('resize', () => this.updateLimit());
|
|
},
|
|
updateLimit() {
|
|
const screenWidth = window.innerWidth;
|
|
if (screenWidth < 768) {
|
|
this.limit = 5;
|
|
} else if (screenWidth >= 768 && screenWidth < 1024) {
|
|
this.limit = 2;
|
|
} else if (screenWidth >= 1024 && screenWidth < 1280) {
|
|
this.limit = 3;
|
|
} else {
|
|
this.limit = 4;
|
|
}
|
|
}
|
|
}));
|
|
</script>
|
|
@endscript |