From 9cbbc8c46763f9dc45f9cbd491cfba6c6bd8ee6b Mon Sep 17 00:00:00 2001
From: Matt Marcha <matt@marcha.pro>
Date: Wed, 21 Aug 2024 16:41:01 -1000
Subject: [PATCH] sect 13

---
 awesome_owl/static/src/card/card.js   | 10 +++++++++-
 awesome_owl/static/src/card/card.xml  |  2 +-
 awesome_owl/static/src/playground.xml |  8 ++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index 6265bfa..2956e4a 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -4,5 +4,13 @@ import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
-    static props = ['title', 'content'];
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            },
+        }
+    };
 }
\ No newline at end of file
diff --git a/awesome_owl/static/src/card/card.xml b/awesome_owl/static/src/card/card.xml
index ce29d41..954a8f1 100644
--- a/awesome_owl/static/src/card/card.xml
+++ b/awesome_owl/static/src/card/card.xml
@@ -7,7 +7,7 @@
                 <div class="card-body">
                     <h3 class="card-title"><t t-esc="props.title"/></h3>
                     <p class="card-text">
-                        <t t-esc="props.content"/>
+                        <t t-slot="default"/>
                     </p>
                 </div>
             </div>
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 5c87abb..a796f6d 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -6,8 +6,12 @@
             <Counter onChange.bind="incrementSum"/>
             <p>The sum is <t t-esc="sum.value"/></p>
             <hr />
-            <Card title="'Card 1'" content="'This is the awesome content of the card 1'" />
-            <Card title="'Card, the 2nd'" content="'Here is another card content. It is the second one.'" />
+            <Card title="'Card 1'">
+                <span>Hello Owl</span>
+            </Card>
+            <Card title="'Card, the 2nd'">
+                <Counter />
+            </Card>
             <hr/>
             <TodoList />
     </t>