eliashaeussler/typo3-badges

{% set icons = {
    'info': '<path clip-rule="evenodd" fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z"></path>',
    'success': '<path clip-rule="evenodd" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"></path>',
    'error': '<path clip-rule="evenodd" fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>',
    'warning': '<path clip-rule="evenodd" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>',
} %}
{% set backgroundColors = {
    'info': 'bg-blue-50',
    'success': 'bg-green-50',
    'error': 'bg-red-50',
    'warning': 'bg-orange-50',
} %}
{% set colors = {
    'info': 'text-blue-500',
    'success': 'text-green-500',
    'error': 'text-red-500',
    'warning': 'text-orange-500',
} %}

<div class="rounded-md shadow {{ backgroundColors[severity] }} p-4 mt-3 md:mt-4">
    <div class="flex items-start space-x-2.5 {{ colors[severity] }}">
        <svg class="w-6 h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">{{ icons[severity] | raw }}</svg>
        <div>
            <div class="mt-0.5 text-sm font-semibold">
                {{ header }}
            </div>
            <div class="mt-1 text-sm font-medium text-gray-600">
                {{ body | raw }}
            </div>
        </div>
    </div>
</div>