@props([
    'title',
    'value',
    'icon',
    'color',
    'url' => '#'
])


<div class="col-xl-3 col-md-4 col-sm-6 mb-3">

    <div class="card dashboard-card border-0">

        <div class="card-body">


            <a href="{{ $url != '#' ? $url : 'javascript:void(0)' }}"
               class="text-decoration-none text-dark">


                <div class="d-flex justify-content-between align-items-center">


                    <div>

                        <h6 class="text-muted mb-2">

                            {{ $title }}

                        </h6>


                        <h3 class="fw-bold text-{{ $color }}">

                            {{ $value }}

                        </h3>

                    </div>


                    <div>

                        <i class="{{ $icon }}
                                  fs-1
                                  text-{{ $color }}">
                        </i>

                    </div>


                </div>


            </a>


        </div>


    </div>


</div>


@push('styles')

<style>


.dashboard-card{

border-radius:15px;

box-shadow:
0 8px 25px rgba(0,0,0,.18);

transition:.3s;

}


.dashboard-card:hover{

transform:translateY(-6px);

box-shadow:
0 15px 35px rgba(0,0,0,.30);

}



</style>

@endpush