Alain Afflelou Design System

Rating List: Without Title 


        
    



    
    

    
        
{# review-list.twig #}
{% for review in reviews %}
    <div class="flex flex-col gap-2 bg-white">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="font-medium text-neutral-800">{{ review.author }}</h3>
                <p class="text-neutral-500 text-sm">{{ review.date }}</p>
            </div>

            <div class="flex items-center gap-2">
                <div class="flex gap-0.5">
                    {% for i in 1..5 %}
                        {% set fillPercentage = (review.rating - i + 1) * 100 %}
                        {% if fillPercentage > 100 %}
                            {% set fillPercentage = 100 %}
                        {% elseif fillPercentage < 0 %}
                            {% set fillPercentage = 0 %}
                        {% endif %}

                        <div class="relative">
                            {# Empty star #}
                            {% render "@icons-library--star-outline" with {
                                size: 12,
                                class: "text-yellow-400"
                            } %}

                            {# Filled star overlay #}
                            <div class="absolute inset-0 overflow-hidden"
                                 style="clip-path: inset(0 {{ 100 - fillPercentage }}% 0 0)">
                                {% render "@icons-library--star-fill" with {
                                    size: 12,
                                    class: "text-yellow-400"
                                } %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <span class="font-medium text-neutral-800">{{ review.rating }}/5</span>
            </div>
        </div>

        <p class="text-neutral-800">{{ review.content }}</p>
    </div>
{% endfor %}

    



    
    

    
        
            
            
{
  "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.