@php
    $colors = [

    'cyan'=> [
        'bg_content'    =>'bg-cyan-600',
        'icon'    =>'text-cyan-100',
        'bg_title'    =>'bg-cyan-800 text-cyan-400',
    ],

    'orange'=> [
        'bg_content'    =>'bg-orange-600',
        'icon'    =>'text-orange-100',
        'bg_title'    =>'bg-orange-800 text-orange-300',
    ],

    'amber'=> [
        'bg_content'    =>'bg-amber-600',
        'icon'    =>'text-amber-100',
        'bg_title'    =>'bg-amber-800 text-amber-300',
    ],

    'sky'=> [
        'bg_content'    =>'bg-sky-600',
        'icon'    =>'text-sky-100',
        'bg_title'    =>'bg-sky-800 text-sky-100',
    ],

    'pink'=> [
        'bg_content'    =>'bg-pink-600',
        'icon'    =>'text-pink-100',
        'bg_title'    =>'bg-pink-800 text-pink-200',
    ],

    'fuchia'=> [
        'bg_content'    =>'bg-fuchia-600',
        'icon'    =>'text-fuchia-100',
        'bg_title'    =>'bg-fuchia-800',
    ],

    'rose'=> [
        'bg_content'    =>'bg-rose-600',
        'icon'    =>'text-rose-100',
        'bg_title'    =>'bg-rose-800 text-rose-300',
    ],

    'yellow'=> [
        'bg_content'    =>'bg-yellow-600',
        'icon'    =>'text-yellow-100',
        'bg_title'    =>'bg-yellow-700 text-yellow-100',
    ],

    'green'=> [
        'bg_content'    =>'bg-green-600',
        'icon'    =>'text-green-100',
        'bg_title'    =>'bg-green-700 text-green-300',
    ],
];

$theme_color = key_exists($theme, $colors) ? (object)$colors[$theme] : (object)$colors['cyan'];

@endphp

<a href="{{url($item->url)}}" class="flex flex-col justify-center h-16  {{$theme_color->bg_content}} bg-opacity-80 hover:bg-opacity-90 shadow-md shadow-gray-400">
    <div class="flex flex-1 items-center justify-center h-8 {{$theme_color->icon}} text-opacity-70">
        <i class="{{!empty($item->icon)?$item->icon:'fal fa-user'}} fa-xl"></i>
    </div>
    <div class="flex w-full items-center font-semibold justify-center h-6 {{$theme_color->bg_title}}  bg-opacity-70 px-3 text-xs">
        {{$item->title}}
    </div>
</a>