287 lines
11 KiB
PHP
287 lines
11 KiB
PHP
@props(['blogs'])
|
|
|
|
<div>
|
|
|
|
@php
|
|
$count=0;
|
|
$num=0;
|
|
@endphp
|
|
|
|
@foreach($blogs->chunk(4) as $key => $chunk)
|
|
|
|
<div class="grid my-5 grid-cols-2 gap-10 h-[66vh] ">
|
|
|
|
|
|
{{-- @dd($blogs->chunk(4))--}}
|
|
@if($count%4==0 && $chunk->has($count))
|
|
@php
|
|
|
|
$blog=$chunk->all()[$count];
|
|
|
|
$num=0;
|
|
|
|
@endphp
|
|
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
"
|
|
class=" rounded-xl">
|
|
|
|
<a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
|
|
|
|
<div class="p-5 h-full rounded-xl"
|
|
style="background-image: linear-gradient(180deg, transparent, black);">
|
|
|
|
<div class="h-full flex flex-col gap-1 justify-end">
|
|
|
|
<div>
|
|
<div style="background: {{$blog->category->color}}"
|
|
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
|
<svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
|
|
<circle r="5" cx="5" cy="6.5" fill="black" />
|
|
</svg>
|
|
{{$blog->category->title}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->subject !!}
|
|
</div>
|
|
<div>
|
|
{!! $blog->preview !!}
|
|
</div>
|
|
<div class="flex gap-5 text-white">
|
|
|
|
<div>
|
|
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->likes ??0 !!}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
@php $count=$count+1; @endphp
|
|
|
|
@endif
|
|
|
|
|
|
<div class="">
|
|
<div class="grid gap-10 h-full">
|
|
|
|
@if($count%4==1 && $chunk->has($count))
|
|
@php
|
|
|
|
$blog=$chunk->all()[$count];
|
|
|
|
@endphp
|
|
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;"
|
|
class=" rounded-xl ">
|
|
|
|
<a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
|
|
|
|
<div class="p-5 h-full rounded-xl"
|
|
style="background-image: linear-gradient(180deg, transparent, black);">
|
|
|
|
<div class="h-full flex flex-col gap-1 justify-end">
|
|
|
|
<div>
|
|
<div style="background: {{$blog->category->color}}"
|
|
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
|
<svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
|
|
<circle r="5" cx="5" cy="6.5" fill="black" />
|
|
</svg>
|
|
{{$blog->category->title}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->subject !!}
|
|
</div>
|
|
<div>
|
|
{!! $blog->preview !!}
|
|
</div>
|
|
<div class="flex gap-5 text-white">
|
|
|
|
<div>
|
|
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->likes ??0 !!}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
@php $count=$count+1; @endphp
|
|
|
|
@endif
|
|
|
|
|
|
<div>
|
|
|
|
<div class="grid grid grid-cols-2 gap-10 h-full">
|
|
|
|
@if($count%4==2 && $chunk->has($count))
|
|
@php
|
|
|
|
$blog=$chunk->all()[$count]
|
|
|
|
@endphp
|
|
<div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;"
|
|
class=" rounded-xl ">
|
|
|
|
<a {{route('detail',['id'=>$blog->id])}} wire:navigate>
|
|
|
|
<div class="p-5 h-full rounded-xl "
|
|
style="background-image: linear-gradient(180deg, transparent, black);">
|
|
|
|
<div class="h-full flex flex-col gap-1 justify-end">
|
|
|
|
<div>
|
|
<div style="background: {{$blog->category->color}}"
|
|
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
|
<svg height="12" width="12"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle r="5" cx="5" cy="6.5" fill="black" />
|
|
</svg>
|
|
{{$blog->category->title}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->subject !!}
|
|
</div>
|
|
<div>
|
|
{!! $blog->preview !!}
|
|
</div>
|
|
<div class="flex gap-5 text-white">
|
|
|
|
<div class="text-xs">
|
|
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
|
</div>
|
|
|
|
<div class="text-xs">
|
|
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
|
</div>
|
|
|
|
{{-- <div class="text-xs">--}}
|
|
{{-- {!! $blog->likes ??0 !!}--}}
|
|
{{-- </div>--}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
@php $count=$count+1; @endphp
|
|
|
|
@endif
|
|
|
|
|
|
@if($count%4==3 && $chunk->has($count))
|
|
@php
|
|
|
|
$blog=$chunk->all()[$count]
|
|
|
|
@endphp
|
|
<div style="background-image: url('{{asset('images/'.$blog->image)}}');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;" class=" rounded-xl">
|
|
|
|
<a {{route('detail',['id'=>$blog->id])}} wire:navigate>
|
|
|
|
<div class="p-5 h-full rounded-xl"
|
|
style="background-image: linear-gradient(180deg, transparent, black);">
|
|
|
|
<div class="h-full flex flex-col gap-1 justify-end">
|
|
|
|
<div>
|
|
<div style="background: {{$blog->category->color}}"
|
|
class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
|
|
<svg height="12" width="12"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle r="5" cx="5" cy="6.5" fill="black" />
|
|
</svg>
|
|
{{$blog->category->title}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{!! $blog->subject !!}
|
|
</div>
|
|
<div>
|
|
{!! $blog->preview !!}
|
|
</div>
|
|
<div class="flex gap-5 text-white">
|
|
|
|
<div class="text-xs">
|
|
{{jalaliDate($blog->updated_at,'%d %B، %Y')}}
|
|
</div>
|
|
|
|
<div class="text-xs">
|
|
{!! $blog->reed_time !!} دقیقه زمان مطالعه
|
|
</div>
|
|
|
|
{{-- <div class="text-xs">--}}
|
|
{{-- {!! $blog->likes ??0 !!}--}}
|
|
{{-- </div>--}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
@php $count=$count+1; @endphp
|
|
|
|
|
|
@endif
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
|
|
</div> |