ch2.3 Add a dashboard item

awesome_dashboard/static/src/dashboard.js

@@ -4,10 +4,11 @@ import { Component } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks"
+import { DashboardItem } from "./dashboard_item";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout };
+    static components = { Layout, DashboardItem };
 
     setup() {
         this.display = {

awesome_dashboard/static/src/dashboard.xml

@@ -7,6 +7,11 @@
                 <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
                 <button class="btn btn-primary" t-on-click="openLeads">Leads</button>
             </t>
+            <div class="d-flex flex-wrap">
+                <DashboardItem />
+                <DashboardItem size="2">That's a bigger one</DashboardItem>
+                <DashboardItem/>
+            </div>
         </Layout>
     </t>
 

awesome_dashboard/static/src/dashboard_item.js

@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem";
+    static props = {
+        size: {
+            type: Number,
+            default: 1,
+            optional: true,
+        },
+        slots: {
+            type: Object,
+            shape: {
+                default: Object
+            },
+        }
+    };
+}

awesome_dashboard/static/src/dashboard_item.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.DashboardItem">
+        <section>
+            <div class="card d-inline-block m-2" t-attf-style="width:{{18*props.size}}rem;">
+                <div class="card-body">                 
+                        <t t-slot="default">some content</t>
+                </div>
+            </div>
+        </section>
+    </t>
+
+</templates>