Replace example by an AlertComponent

Author: WebMamba

src/TwigComponent/doc/index.rst

@@ -853,52 +853,49 @@ Twig Component came with a new syntax to ease the readability of your template:
 .. code-block:: html+twig
 
     {# templates/some_page.html.twig #}
-    <twig:table :headers="['key', 'value']" :data="[[1, 2], [3, 4]]">
-        <twig:block name="th_class">
-            {{ parent() }}
-        </twig:block>
-         <twig:block name="td_class">
-            {{ parent() }}
-        </twig:block>
-        <twig:block name="footer">
-            <div class="data-table-footer">
-               My footer
-            </div>
-        </twig:block>
-    </twig:table>
+    <twig:Alert warning :user="user.username" message="I am an alert!">
+       <div class="alert-content">
+            // ... your component content
+       </div>
+       <twig:block name="footer">
+            // ... footer content
+       </twig:block>
+    </twig:Alert>
 
 You can now use a custom tag prefix starting by <twig: and your component name
 
 .. code-block:: html+twig
 
-    <twig:table></:table>
+    <twig:Alert></:Alert>
     // and also self closing tag
-    <twig:table/>
+    <twig:Alert/>
 
 You can pass an attribute to your component like any HTML attribute and also use the ':' prefix to your attribute to indicate that the value should be compiled by Twig
 
 .. code-block:: html+twig
 
-    // primary will be set to true
-    <twig:component primary></:component>
-    <twig:component text="hello" :user="user.id"/>
+    // Warning will be set to true
+    <twig:Alert warning></:Alert>
+    
+    <twig:Alert message="hello" :user="user.id"/>
 
     // equal to
-    <twig:component text="hello" user="{{ user.id }}"/>
+    
+    <twig:Alert message="hello" user="{{ user.id }}"/>
 
     // and pass object, or table, or anything you imagine
-    <twig:component :table="['col' => ['foo', 'oof']]"/>
+    <twig:Alert :foo="['col' => ['foo', 'oof']]"/>
 
 You can pass content directly inside your component.
 
 .. code-block:: html+twig
 
-    <twig:component>
+    <twig:Alert>
        // any content you want
        <div>
            ...
        </div>
-    </twig:component>
+    </twig:Alert>
 
 Then in your component template, you can access the content put into your component: