[IMP] playground: improve first example

Previous example did not illustrate props

tools/playground/samples.js

@@ -1,16 +1,17 @@
 const COMPONENTS = `// In this example, we show how components can be defined and created.
 
-class Counter extends owl.Component {
+class Greeter extends owl.Component {
-    state = { value: 0 };
+    state = { word: 'Hello' };
 
-    increment() {
+    toggle() {
-        this.state.value++;
+        this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi'
     }
 }
 
 // Main root component
 class App extends owl.Component {
-    components = { Counter };
+    components = { Greeter };
+    state = { name: 'World'};
 }
 
 // Application setup
@@ -21,20 +22,25 @@ app.mount(document.body);
 `;
 
 const COMPONENTS_XML = `<templates>
-  <button t-name="Counter" t-on-click="increment">
+  <div t-name="Greeter" class="greeter" t-on-click="toggle">
-    Click Me! [<t t-esc="state.value"/>]
+    <t t-esc="state.word"/>, <t t-esc="props.name"/>
-  </button>
+  </div>
 
   <div t-name="App">
-    <Counter />
+    <Greeter name="state.name"/>
-    <Counter />
   </div>
-</templates>`;
+</templates>
+`;
 
-const COMPONENTS_CSS = `button {
+const COMPONENTS_CSS = `.greeter {
     font-size: 20px;
-    width: 220px;
+    width: 300px;
+    height: 100px;
     margin: 5px;
+    text-align: center;
+    line-height: 100px;
+    background-color: #eeeeee;
+    user-select: none;
 }`;
 
 const ANIMATION = `// The goal of this component is to see how the t-transition directive can be