<div class="d-flex align-self-center my-1 my-sm-0 share-btn" data-url="{{ url()->current() }}" data-title="{{ $post->title }}" data-desc="{!! Str::limit($post->keyword, 100, '...') !!}">
    <div>
        <span class="mx-1"><i class='bx bx-share-alt' ></i> Share :</span>
    </div>
    <a class="mx-1 hover-cursor" data-id="fb">
        <img src="{{ asset('img/contact-us/facebook.png') }}" alt="facebook">
    </a>
    <a class="mx-1 hover-cursor" data-id="tw">
        <img src="{{ asset('img/contact-us/twitter.png') }}" alt="twitter">
    </a>
    <a class="mx-1 hover-cursor" data-id="tg">
        <img src="{{ asset('img/contact-us/telegram.png') }}" alt="telegram">
    </a>
</div>

@push('scripts')
<script src="//cdn.jsdelivr.net/npm/share-buttons/dist/share-buttons.js"></script>
@endpush


@push('styles')
    <style>
        .hover-cursor:hover{
            cursor: pointer;
            opacity: 0.7;
        }
    </style>
@endpush