@include('components.seo')
<div class="space-y-4">
    <x-client.breadcrumbs :breadcrumb="$breadcrumb"/>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4  mt-7">
        @foreach($datas as $data)
            <div
                class="border dark:border-amber-400 p-4 rounded-3xl lg:flex flex flex-col lg:space-y-5 gap-4 bg-gray-200 shadow-md dark:bg-stone-700 ">
                <a
                    class=""
                    href="{{route('show.categories' , $data->slug)}}">
                    <img
                        class=" rounded-xl hover:grayscale @include('components.transition') hover:scale-105 hover:-skew-y-2"
                        src="{{$data->avatar}}" alt="{{$data->name}}" height="200" width="400">
                </a>
                <div class="w-full">
                    <a
                        class="text-amber-400"
                        href="{{route('show.categories' , $data->slug)}}">
                        <h2 class="text-lg">{{$data->name}}</h2>
                    </a>
                </div>
                <div class="flex justify-between">
                    <p>نویسنده : {{$data->user->name}}</p>
                    <div class="flex gap-1">
                        {{jdate($data->created_at)->ago()}}
                        <x-icons.clock class="size-6 "/>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    {{ $datas->links()  }}
    <livewire:client.component.free-advice/>

</div>