devplacepy/devplacepy/templates/_reaction_bar.html

{% set _counts = (_reactions or {}).get('counts', {}) %}
{% set _mine = (_reactions or {}).get('mine', []) %}
{% set _emojis = reaction_emojis(_reactions) %}
{% if user or _counts %}
<div class="reaction-bar" data-reaction-type="{{ _type }}" data-reaction-uid="{{ _uid }}" role="group" aria-label="Reactions">
    <div class="reaction-list">
        {% for emoji in _emojis %}
        <button type="button" class="reaction-chip{% if emoji in _mine %} reacted{% endif %}" data-reaction-emoji="{{ emoji }}" aria-label="React with {{ emoji }}" aria-pressed="{% if emoji in _mine %}true{% else %}false{% endif %}"{% if not _counts.get(emoji) and emoji not in _mine %} hidden{% endif %}{{ guest_disabled(user) }}>
            <span class="reaction-emoji">{{ emoji }}</span>
            <span class="reaction-count">{% if user %}{{ _counts.get(emoji, 0) }}{% endif %}</span>
        </button>
        {% endfor %}
    </div>
    <div class="reaction-add">
        <button type="button" class="reaction-add-btn" aria-label="Add reaction" title="Add reaction" aria-expanded="false"{{ guest_disabled(user) }}><span class="reaction-add-icon">&#x1F642;</span><span class="reaction-add-label">React</span></button>
        {% if user %}
        <div class="reaction-palette" hidden>
            {% for emoji in REACTION_EMOJI %}
            <button type="button" class="reaction-palette-btn" data-reaction-emoji="{{ emoji }}" aria-label="React with {{ emoji }}">{{ emoji }}</button>
            {% endfor %}
            <button type="button" class="reaction-palette-more" aria-label="Choose any emoji" title="Choose any emoji" aria-expanded="false">&plus;</button>
        </div>
        <div class="reaction-picker" hidden></div>
        {% endif %}
    </div>
</div>
{% endif %}