<div class="space-y-2">
<div class="">
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">5</span>
<svg class="text-neutral-800 w-3 h-3 md:w-4 md:h-4 shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-neutral-800 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">0</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">4</span>
<svg class="text-neutral-800 w-3 h-3 md:w-4 md:h-4 shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-neutral-800 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">0</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">3</span>
<svg class="text-neutral-800 w-3 h-3 md:w-4 md:h-4 shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-neutral-800 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">0</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">2</span>
<svg class="text-neutral-800 w-3 h-3 md:w-4 md:h-4 shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-neutral-800 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">0</span>
</div>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">1</span>
<svg class="text-neutral-800 w-3 h-3 md:w-4 md:h-4 shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-neutral-800 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">0</span>
</div>
</div>
</div>
{# rating-distribution.twig #}
<div class="space-y-2">
{% if title|default('Évaluation globale') %}
<h2 class="text-xs font-medium text-neutral-800 mb-2">{{ title }}</h2>
{% endif %}
{% set ratingCounts = [] %}
{% set total = reviews|length %}
{% for i in 5..1 %}
{% set count = 0 %}
{% for review in reviews %}
{% if review.rating|round == i %}
{% set count = count + 1 %}
{% endif %}
{% endfor %}
{% set ratingCounts = ratingCounts|merge([{
'value': i,
'count': count
}]) %}
{% endfor %}
<div class="">
{% for rating in ratingCounts %}
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 w-8">
<span class="font-medium text-neutral-800">{{ rating.value }}</span>
{% render "@icons-library--star-fill" with {
size: 16,
iconClass: "text-neutral-800 w-3 h-3 md:w-4 md:h-4"
} %}
</div>
<div class="flex-1 h-2 bg-neutral-100 rounded-full overflow-hidden">
<div
class="h-full bg-neutral-800 rounded-full transition-all duration-300"
style="width: {% if total > 0 %}{{ (rating.count / total * 100)|round }}{% else %}0{% endif %}%"
></div>
</div>
<span class="w-6 text-right font-medium text-neutral-800">{{ rating.count }}</span>
</div>
{% endfor %}
</div>
</div>
{
"title": false,
"classStarColor": "text-neutral-800",
"ratings": [
{
"author": "Angélique",
"date": "Il y a 3 semaines",
"rating": 5,
"content": "Accueil souriant et efficace, idéalement situé près de chez mon ophtalmologue, que demander de plus ?"
},
{
"author": "Bertrand",
"date": "août 2024",
"rating": 3.5,
"content": "Auctor nisl nisl integer felis feugiat. Euismod morbi mattis diam elementum ultrices nulla tellus luctus."
},
{
"author": "Emanuelle",
"date": "juillet 2024",
"rating": 5,
"content": "Ultrices nam nulla tellus luctus lectus non quam."
},
{
"author": "Sophie",
"date": "septembre 2024",
"rating": 4,
"content": "Lorem ipsum dolor sit amet consectetur. Velit netus nunc at quis duis morbi. Ac congue venenatis magna pellentesque ut. Nunc porttitor posuere egestas duis venenatis lacus elit. Elit phasellus quis varius semper neque morbi commodo. Elementum volutpat donec id vitae sed. Nisl adipiscing blandit mi habitant ante."
}
]
}
No notes defined.