added first lit component for example

2025-03-24 23:40:04 -05:00
parent 4c99592b8b
commit 8fb37b4807
3 changed files with 26 additions and 2 deletions
@@ -7,6 +7,7 @@
    <title>yellowjacket</title>
    <link rel="stylesheet" type="text/css" href="/src/assets/styles/pico.css">
 </head>
+<script type="module" src="/src/components/player.js"></script>
 <script src="/src/assets/scripts/main.js" type="module"></script>

 <body>
@@ -28,7 +29,7 @@
                        </summary>
                        <ul>
                            <li>
-                                <a href="#">
+                                <a href="/src/pages/config.html">
                                    <img src="/src/assets/images/icons/ui/settings.svg" />
                                </a>
                            </li>
@@ -50,7 +51,9 @@
            </button>
        </section>
    </main>
-    <footer></footer>
+    <footer>
+        <player-controls></player-controls>
+    </footer>
 </body>

 </html>
@@ -0,0 +1,21 @@
+import {LitElement, html} from 'lit';
+
+export class Player extends LitElement {
+  static properties = {
+    version: {},
+  };
+
+  constructor() {
+    super();
+    this.version = 'STARTING';
+  }
+
+  render() {
+    return html`
+    <p>Welcome to the Lit tutorial!</p>
+    <p>This is the ${this.version} code.</p>
+    `;
+  }
+}
+customElements.define('player-controls', Player);
+