Etat Pur Design System

Address item 

<tr class="h-14 border-b border-black/08 even:bg-neutral-50 text-body-sm">
    <td class="p-2 hidden md:table-cell">Alice Dupont</td>
    <td class="p-2">
        <div>
            12 rue Lafayette
            <span class="md:hidden">
                <br>Paris
                <br>France
            </span>
        </div>
    </td>
    <td class="p-2 hidden md:table-cell">Paris</td>
    <td class="p-2 hidden md:table-cell">France</td>
    <td class="p-2">
        <div class="flex items-center justify-center">
            <button type="button" class=" btn  btn-dark  btn-outline  btn-size-md">
                Editer

            </button>
        </div>
    </td>
    <td class="p-2">
        <div class="flex items-center justify-center">
            <button type="button" aria-label="Label text" class=" btn  btn-dark  btn-simple  btn-size-md btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
    </td>
</tr>
 
<tr class="h-14 border-b border-black/08 even:bg-neutral-50 text-body-sm">
    <td class="p-2 hidden md:table-cell">{{ name }}</td>
    <td class="p-2">
        <div>
            {{ address }}
            <span class="md:hidden">
                <br>{{ city }}
                <br>{{ country }}
            </span>
        </div>
    </td>
    <td class="p-2 hidden md:table-cell">{{ city }}</td>
    <td class="p-2 hidden md:table-cell">{{ country }}</td>
    <td class="p-2">
        <div class="flex items-center justify-center">
            {% render "@template-button" with {
                label: "Editer",
                type: 'outline',
                size:"md",
                color: 'dark',
            } %}
        </div>
    </td>
    <td class="p-2">
        <div class="flex items-center justify-center">
            {% render "@template-button" with {
                type: 'simple',
                size:"md",
                color: 'dark',
                icon_type: 'only-icon',
                icon: {
                    name: 'heroicons--trash-outline',
                }
            } %}
        </div>
    </td>
</tr>
 
{
  "name": "Alice Dupont",
  "address": "12 rue Lafayette",
  "city": "Paris",
  "country": "France"
}

No notes defined.