Etat Pur Design System

Info Store 

<div class="flex flex-col gap-3 cursor-default h-full bg-white md:shadow-32 md:w-screen-50 md:max-w-80 p-3" @click.outside="closeInfoWindow()">
    <div class="bg-brand-100 flex justify-between items-start gap-2 relative px-4 py-2">
        <div>
            <h3 class="text-click-sm text-black font-bold uppercase line-clamp-1">${store.name}</h3>
            <p class="text-click-xs leading-tight text-black/80">${store.address}<br>${store.city}</p>
        </div>
        <button type="button" data-close aria-label="Label text" class=" btn  btn-neutral  btn-outline  btn-size-sm 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="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg>

        </button>
    </div>

    <div class="flex flex-col gap-3 text-click-xs px-4">
        <div class="flex items-center gap-2 font-bold">
            <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> ${store.phone
            ? `<a href="tel:${store.phone.replace(/\s+/g, '')}">${store.phone}</a>`
            : `<span>Téléphone non disponible</span>`
            }
        </div>

        <div class="flex flex-col gap-2">
            <h4 class="font-bold flex items-center gap-1">
                <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Horaires d’ouverture
            </h4>
            <div class="divide-y divide-black/08">
                ${Alpine.store('locator').days.map(day => {
                const value = (store[day.key] || '').trim();
                const segments = value.includes(',') ? value.split(',').map(s => s.trim()) : [value];
                const closed = segments[0].toLowerCase().includes("fermé");

                return `
                <div class="flex justify-between py-1">
                    <span class="font-bold">${day.label}</span>
                    <span class="whitespace-nowrap">
                        ${segments.filter(Boolean).join('<br>') || 'Fermé'}
                    </span>
                </div>
                `;
                }).join('')}
            </div>
        </div>

        <a href="https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}" type="button" target="_blank" rel="noopenner noreferer" aria-label="Itinéraire (s'ouvre dans un nouvel onglet)" class="w-fit  btn  btn-dark  btn-outline  btn-size-sm btn-icons">
            Itinéraire

            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M17.051 2.52738C17.2846 2.43058 17.5535 2.48403 17.7323 2.66281C17.911 2.84159 17.9645 3.11047 17.8677 3.34404L11.7202 18.1699C11.6147 18.4239 11.3557 18.5791 11.082 18.5522C10.8083 18.5254 10.5843 18.3228 10.5302 18.0532L9.1652 11.2299L2.34186 9.86488C2.07224 9.81076 1.86968 9.58677 1.84284 9.31308C1.81601 9.0394 1.97122 8.78033 2.2252 8.67488L17.051 2.52738Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg>
        </a>
    </div>
</div>
 
<div class="flex flex-col gap-3 cursor-default h-full bg-white md:shadow-32 md:w-screen-50 md:max-w-80 p-3" @click.outside="closeInfoWindow()">
    <div class="bg-brand-100 flex justify-between items-start gap-2 relative px-4 py-2">
        <div>
            <h3 class="text-click-sm text-black font-bold uppercase line-clamp-1">${store.name}</h3>
            <p class="text-click-xs leading-tight text-black/80">${store.address}<br>${store.city}</p>
        </div>
        {% render "@template-button" with {
            color: "neutral",
            type: 'outline',
            size: "sm",
            icon_type: 'only-icon',
            icon: {name:'heroicons--x-mark-outline'},
            button_attribute: 'data-close'
        } %}
    </div>

    <div class="flex flex-col gap-3 text-click-xs px-4">
        <div class="flex items-center gap-2 font-bold">
            {% render "@icons-heroicons--phone-outline" with {
                size: 16
            } %}
            ${store.phone
                ? `<a href="tel:${store.phone.replace(/\s+/g, '')}">${store.phone}</a>`
                : `<span>Téléphone non disponible</span>`
            }
        </div>

        <div class="flex flex-col gap-2">
            <h4 class="font-bold flex items-center gap-1">
                {% render "@icons-heroicons--clock-outline" with {
                    size: 16
                } %}
                Horaires d’ouverture
            </h4>
            <div class="divide-y divide-black/08">
                ${Alpine.store('locator').days.map(day => {
                const value = (store[day.key] || '').trim();
                const segments = value.includes(',') ? value.split(',').map(s => s.trim()) : [value];
                const closed = segments[0].toLowerCase().includes("fermé");

                return `
                    <div class="flex justify-between py-1">
                        <span class="font-bold">${day.label}</span>
                        <span class="whitespace-nowrap">
                            ${segments.filter(Boolean).join('<br>') || 'Fermé'}
                        </span>
                    </div>
                `;
                }).join('')}
            </div>
        </div>

        {% render "@template-button" with {
            href: "https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}",
            external: true,
            label: "Itinéraire",
            color: "dark",
            type: "outline",
            size: "sm",
            icon_type: 'trailing-icon',
            icon: {
                name: 'heroicons--arrow-maps',
            },
            button_class: "w-fit"
        } %}
    </div>
</div>
 
/* No context defined. */

No notes defined.