Etat Pur Design System

Blog Like Dislake 

<div class="flex flex-row gap-2">

    <button class="flex items-center gap-1 py-1 px-2 hover:bg-white" data-state="default">
        <svg class="text-green-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M4.42171 6.83331C4.95928 6.83331 5.44432 6.53609 5.77607 6.11309C6.29151 5.45587 6.94113 4.90891 7.68369 4.51346C8.16511 4.25707 8.58286 3.87617 8.78543 3.36974C8.92717 3.01538 9 2.63722 9 2.25557V1.83331C9 1.55717 9.22386 1.33331 9.5 1.33331C10.3284 1.33331 11 2.00489 11 2.83331C11 3.60107 10.827 4.3284 10.5178 4.97845C10.3407 5.35067 10.5891 5.83331 11.0013 5.83331M11.0013 5.83331H13.0852C13.7696 5.83331 14.3822 6.29598 14.4547 6.97655C14.4846 7.25804 14.5 7.54388 14.5 7.83331C14.5 9.73173 13.8387 11.4757 12.734 12.8475C12.4756 13.1683 12.0761 13.3333 11.6642 13.3333H8.98683C8.66439 13.3333 8.34405 13.2813 8.03815 13.1794L5.96185 12.4873C5.65595 12.3853 5.33561 12.3333 5.01317 12.3333H3.93614M11.0013 5.83331H9.5M3.93614 12.3333C3.99135 12.4697 4.05142 12.6036 4.11615 12.7348C4.24758 13.0011 4.06413 13.3333 3.76712 13.3333H3.16192C2.56945 13.3333 2.01994 12.988 1.84704 12.4213C1.62139 11.6817 1.5 10.8967 1.5 10.0833C1.5 9.04834 1.69654 8.05927 2.05433 7.15139C2.2577 6.63534 2.77822 6.33331 3.3329 6.33331H4.03474C4.34936 6.33331 4.53154 6.70392 4.3682 6.97281C3.81726 7.87984 3.5 8.94453 3.5 10.0833C3.5 10.879 3.65488 11.6385 3.93614 12.3333Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> <span class="text-body-sm font-bold text-black">Oui</span>

    </button>

    <button class="flex items-center gap-1 py-1 px-2 hover:bg-white" data-state="default">
        <svg class="text-red-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M4.42171 6.83331C4.95928 6.83331 5.44432 6.53609 5.77607 6.11309C6.29151 5.45587 6.94113 4.90891 7.68369 4.51346C8.16511 4.25707 8.58286 3.87617 8.78543 3.36974C8.92717 3.01538 9 2.63722 9 2.25557V1.83331C9 1.55717 9.22386 1.33331 9.5 1.33331C10.3284 1.33331 11 2.00489 11 2.83331C11 3.60107 10.827 4.3284 10.5178 4.97845C10.3407 5.35067 10.5891 5.83331 11.0013 5.83331M11.0013 5.83331H13.0852C13.7696 5.83331 14.3822 6.29598 14.4547 6.97655C14.4846 7.25804 14.5 7.54388 14.5 7.83331C14.5 9.73173 13.8387 11.4757 12.734 12.8475C12.4756 13.1683 12.0761 13.3333 11.6642 13.3333H8.98683C8.66439 13.3333 8.34405 13.2813 8.03815 13.1794L5.96185 12.4873C5.65595 12.3853 5.33561 12.3333 5.01317 12.3333H3.93614M11.0013 5.83331H9.5M3.93614 12.3333C3.99135 12.4697 4.05142 12.6036 4.11615 12.7348C4.24758 13.0011 4.06413 13.3333 3.76712 13.3333H3.16192C2.56945 13.3333 2.01994 12.988 1.84704 12.4213C1.62139 11.6817 1.5 10.8967 1.5 10.0833C1.5 9.04834 1.69654 8.05927 2.05433 7.15139C2.2577 6.63534 2.77822 6.33331 3.3329 6.33331H4.03474C4.34936 6.33331 4.53154 6.70392 4.3682 6.97281C3.81726 7.87984 3.5 8.94453 3.5 10.0833C3.5 10.879 3.65488 11.6385 3.93614 12.3333Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> <span class="text-body-sm font-bold text-black">Non</span>

    </button>
</div>
 
<div class="flex flex-row gap-2">
    {# Like button #}
    <button
        class="flex items-center gap-1 py-1 px-2 hover:bg-white"
        data-state="{{ like_state|default('default') }}"
    >
        {% render "@icons-heroicons--like-outline" with {
            iconClass: "text-green-500",
            size: 20
        } %}
        <span class="text-body-sm font-bold text-black">Oui</span>

        {% if like_count is defined %}
            <span class="text-body-xxs font-bold bg-black text-white rounded-full w-6 h-6 flex items-center justify-center">
        {{ like_count }}
      </span>
        {% endif %}
    </button>

    <button
        class="flex items-center gap-1 py-1 px-2 hover:bg-white"
        data-state="{{ dislike_state|default('default') }}"
    >
        {% render "@icons-heroicons--like-outline" with {
            iconClass: "text-red-500",
            size: 20
        } %}
        <span class="text-body-sm font-bold text-black">Non</span>

        {% if dislike_count is defined %}
            <span class="text-body-xxs font-bold bg-black text-white rounded-full w-6 h-6 flex items-center justify-center">
        {{ dislike_count }}
      </span>
        {% endif %}
    </button>
</div>
 
/* No context defined. */

No notes defined.