to add our first basic component

Author: mostafabarmshory

package.json

@@ -62,7 +62,12 @@
 			]
 		],
 		"plugins": [
-			["@babel/plugin-proposal-decorators", { "legacy": true }],
+			[
+				"@babel/plugin-proposal-decorators",
+				{
+					"legacy": true
+				}
+			],
 			"@babel/plugin-proposal-class-properties"
 		],
 		"env": {

src/components/page.ts

@@ -7,7 +7,7 @@ export const route = (path: string) => {
         registry.category('pages').add(path, target);
     }
 }
-export const themplate = (name: string) => {
+export const template = (name: string) => {
     return (target: any) => {
         target.template = name;
     }

src/core/buttons/buttons.scss renamed to src/core/buttons/button.scss

@@ -0,0 +1,13 @@
+/*
+
+@see https://getbootstrap.com/docs/5.0/components/buttons/
+*/
+import { Component } from "@odoo/owl";
+import { template } from "../components";
+
+
+@template('component.button')
+export class Button extends Component {
+    static props = ['color', 'href'];
+
+}

src/core/buttons/button.ts

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="component.button" owl="1">
+        <a t-att-class="{
+                'btn': true,
+                'btn-success': props.color === 'success',
+                'btn-primary': props.color === 'primary',
+                'btn-secondary': props.color === 'secondary',
+            }" 
+            t-att-href="props.href">
+            <t t-slot="default"/>
+        </a>
+    </t>
+</templates>

src/core/buttons/button.xml

@@ -0,0 +1,8 @@
+import { Button } from "./button";
+
+import "./button.xml";
+import "./button.scss"
+
+export {
+    Button
+};

src/core/buttons/buttons.ts

@@ -0,0 +1,11 @@
+
+
+
+/**
+ * A decorator to add template into a component
+ */
+export const template = (name: string) => {
+    return (component: any) => {
+        component.template = name;
+    }
+}

src/core/buttons/buttons.xml

@@ -4,7 +4,7 @@ CSC Network
 
  */
 import { useState } from "@odoo/owl";
-import { OPage, enableStaking, logo, route, symbol, themplate, title } from "../components/page";
+import { OPage, enableStaking, logo, route, symbol, template, title } from "../components/page";
 import { switchChain, useContract, useWallet } from "../core/wallet";
 
 import cetABI from "../data/csc-validators.json";
@@ -22,7 +22,7 @@ const mainnetChainId = "0x34";
 @route('/staking/CSC')
 @title('Coinex Smart Coin')
 @logo('./img/csc.svg')
-@themplate('pages.csc')
+@template('pages.csc')
 @symbol('CET')
 @enableStaking()
 export class CscStakingPage extends OPage {