eatvio-infra/resources/views/livewire/blog-post/list-view.blade.php

<section class="py-5" id="main">
    <div class="container d-block d-sm-flex justify-content-between align-items-end align-items-lg-center mb-4 p-0 --mw-1000" wire:key="search">
        <div class="d-block d-lg-flex align-items-center col-12 col-sm-9 me-lg-2 mb-1 mb-sm-0 p-0 pe-sm-2">
            <div class="h4 me-md-3 mb-3 mb-lg-0 --f_grey text-uppercase">Популярные записи</div>
            <div class="d-flex align-items-center -search flex-grow-1">
                <span class="btn --search_icon">
                    <svg width="20" height="20">
                        <use xlink:href="#SearchIcon"></use>
                    </svg>
                </span>
                <input class="form-control" name="search" wire:model.live.debounce.500ms="search" type="search" placeholder="Поиск записи" />
            </div>
        </div>
        <div class="col-12 col-sm px-0 flex-grow-1">
            <button type="submit" class="btn btn-lg btn-primary btn-block w-100 ps-4 pe-sm-4 --f_bold text-uppercase --no_wrap --radius">Найти запись</button>
        </div>
        {{-- <span class="posts-str-search">{{ $search }}</span> --}}
    </div>
    <div class="container mb-4 p-3 overflow-hidden --bg_white --shadow --radius --mw-1000" wire:key="filter-type">
        {{-- <span class="posts-type-filter">{{ $typeFilter }}</span> --}}
        <ul class="nav nav-pills flex-nowrap --no_wrap w-100 --bordered --radius --tabs_blue overflow-x-xs-scroll" role="radiogroup">
            <li class="col nav-item" role="presentation" id="type-all" wire:key="type-all">
                <label @class(["btn", "btn-lg", "nav-link", "py-3", "--radius", "active" => $typeFilter === 'all']) data-bs-toggle="pill" role="radio" aria-selected="true">
                    <input type="radio" wire:model.live="typeFilter" value="all" @checked(($typeFilter == '' || $typeFilter == 'all')) />
                    Все
                </label>
            </li>
            <li class="col nav-item" role="presentation" id="type-consultant" wire:key="type-consultant">
                <label @class(["btn", "btn-lg", "nav-link", "py-3", "--radius", "active" => $typeFilter === 'consultant']) data-bs-toggle="pill" role="radio" aria-selected="false">
                    <input type="radio" wire:model.live="typeFilter" value="consultant" @checked(($typeFilter == 'consultant')) />
                    От Консультантов
                </label>
            </li>
            <li class="col nav-item" role="presentation" id="type-user" wire:key="type-user">
                <label @class(["btn", "btn-lg", "nav-link", "py-3", "--radius", "active" => $typeFilter === 'user' ]) data-bs-toggle="pill" role="radio" aria-selected="false" >
                    <input type="radio" wire:model.live="typeFilter" value="user" @checked(($typeFilter == 'user')) />
                    Пользовательские
                </label>
            </li>
        </ul>
    </div>
    <div id="recordsList" class="container p-0 --mw-1000" wire:key="posts-result">
        @foreach($blogPosts as $post)
            @php
                $author = $post->author()->first();
                $authorPhoto = $author->profile_photo_url;
                $image = Storage::url($post->image);
                $blogPostViewsCount = views($post)->unique()->count();
            @endphp
            <div class="mb-4 p-3 --bg_white --shadow --radius --no_wrap" data-record_type="user" wire:key="post_{{ $post->id }}" id="post_id_{{ $post->id }}">
                <div class="d-flex mb-4 align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <!--img src="{{ $authorPhoto }}" width="42px" height="42px" class="me-2 --radius_100"-->
                        <a href="{{ route('profile.show', $author->id) }}" class="d-none d-sm-block overflow-hidden rounded-full mr-4" >
                            <div class="centered-bg-img" style="background-image: url('{{ $authorPhoto }}')"></div>
                        </a>
                        <small>
                            <span class="d-block --f_bold lh-1"><a href="{{ route('profile.show', $author->id) }}" class="text-black">{{ $author->name }}</a></span>
                            <span class="--f_grey"><a class="text-black" href="{{ route('blog_post.show', $post->id) }}">{{ $post->created_at }}</a></span>
                        </small>
                    </div>
                    <ul class="navbar-nav" style="--bs-scroll-height:100px;">
                        <li class="nav-item dropdown">
                            <a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                                <svg width="18" height="4"><use xlink:href="#Dots"></use></svg>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                                <li><a class="dropdown-item" href="{{ route('blog_post.edit', $post->id) }}">Edit</a></li>
                                <li><a class="dropdown-item" href="{{ route('blog_post.show', $post->id) }}">Show</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Что-то еще</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="h6 --f_bold --no_wrap_normal"><a class="text-black" href="{{ route('blog_post.show', $post->id) }}">{{ $post->title }}</a></div>
                <small class="d-block --no_wrap_normal my-3">{!! $post->description !!}</small>
                <div class="d-flex justify-center position-relative post_img">
                    <img src="{{ $image }}" class="w-8/12 --radius">
                    <div class="post_v_l w-100 d-flex justify-content-center align-items-center position-absolute --f_white">
                        <svg width="20" height="14" class="me-2"><use xlink:href="#Eye_White"></use></svg>
                        <span class="me-3">{{ $blogPostViewsCount }}</span>
                        <svg width="16" height="14" class="me-2"><use xlink:href="#Heart_White"></use></svg>
                        <livewire:blog-post.like-count :blogPost="$post" wire:key="post-likes-count-key-{{ $post->id }}" />
                    </div>
                </div>
                <div class="d-flex mt-4 mb-3 align-items-center justify-content-between justify-content-sm-center --f_bold">
                    <a href="{{ route('blog_post.show', $post->id) }}#commentsList" class="d-flex align-items-center me-4 me-sm-5 --f_main">
                        <small>
                            <svg width="21" height="20" class="me-1">
                                <use xlink:href="#ActionComment"></use>
                            </svg>
                            Комментировать
                        </small>
                    </a>
                    <livewire:blog-post.like :blogPost="$post" wire:key="post-like-key-{{ $post->id }}" />
                    <a href="#" class="d-flex align-items-center --f_main">
                        <small>
                            <svg width="21" height="22" class="me-1"><use xlink:href="#Share"></use></svg>
                            <span class="d-none d-sm-inline">Поделится</span>
                        </small>
                    </a>
                </div>
            </div>
        @endforeach
        {{ $blogPosts->links() }}
    </div>
</section>