{% props name, href, icon = null, description = null, active = false %}
{% set linkClasses = (active ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-50' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800') ~ ' group flex gap-x-3 rounded-md py-2 pr-3 pl-2 text-sm/6 font-semibold' %}
<li>
    <a href="{{ href }}"
       {{ attributes.defaults({ class: linkClasses }) }}
       {% if active %}aria-current="page"{% endif %}>
        {% if icon %}
            <span class="text-gray-400 dark:text-gray-500 size-6 shrink-0">
                <twig:ux:icon name="{{ icon }}" />
            </span>
        {% endif %}
        <div class="flex flex-col min-w-0">
            <span>
                {{ name|trans({}, 'admin') }}
                {% block name_suffix %}{% endblock %}
            </span>
            {% if description %}
                <span class="text-xs font-normal text-gray-500 dark:text-gray-400">{{ description|trans({}, 'admin') }}</span>
            {% endif %}
        </div>
    </a>
</li>
