[Site] Fix icon on Twig Component

* missing icon class
* invert code block and result
* now use symfony/ux-icons

Author: smnandre

ux.symfony.com/src/Twig/Alert.php

@@ -11,7 +11,6 @@
 
 namespace App\Twig;
 
-use App\Service\UxPackageRepository;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
 #[AsTwigComponent]
@@ -20,20 +19,11 @@ class Alert
     public string $type = 'success';
     public string $message;
 
-    public function __construct(private UxPackageRepository $packageRepository)
-    {
-    }
-
     public function getIcon(): string
     {
         return match ($this->type) {
-            'success' => 'circle-check',
-            'danger' => 'circle-exclamation',
+            'success' => 'bi:check-circle',
+            'danger' => 'bi:exclamation-circle',
         };
     }
-
-    public function getPackageCount(): int
-    {
-        return $this->packageRepository->count();
-    }
 }

ux.symfony.com/templates/components/Alert.html.twig

@@ -1,4 +1,4 @@
 <div class="alert alert-{{ type }} alert-dismissible" role="alert">
-    <twig:Icon name="{{ this.icon }}" class="me-2" />
+    <twig:ux:icon name="{{ this.icon }}" class="Icon bi" />
     {{ message }}
 </div>

ux.symfony.com/templates/ux_packages/twig_component.html.twig

@@ -26,12 +26,7 @@
 {% block demo_title %}UX Twig Components{% endblock %}
 
 {% block demo_content %}
-    <div class="row align-items-center">
-        <div class="col-6">
-            {% block alert_success_example %}
-                <twig:Alert message="I am a success alert!" />
-            {% endblock %}
-        </div>
+    <div class="row">
         <div class="col-6">
             <twig:CodeBlock
                 filename="templates/ux_packages/twig_component.html.twig"
@@ -41,17 +36,14 @@
                 height="auto"
             />
         </div>
-    </div>
-
-    <div class="row my-2 align-items-center">
         <div class="col-6">
-            {% block alert_danger_example %}
-                <twig:Alert
-                    type="danger"
-                    message="Oh no! The dinos escaped!"
-                />
+            {% block alert_success_example %}
+                <twig:Alert message="I am a success alert!" />
             {% endblock %}
         </div>
+    </div>
+
+    <div class="row my-2">
         <div class="col-6">
             <twig:CodeBlock
                 filename="templates/ux_packages/twig_component.html.twig"
@@ -61,5 +53,13 @@
                 height="auto"
             />
         </div>
+        <div class="col-6">
+            {% block alert_danger_example %}
+                <twig:Alert
+                    type="danger"
+                    message="Oh no! The dinos escaped!"
+                />
+            {% endblock %}
+        </div>
     </div>
 {% endblock %}