feat(demo-pwa): page-chat

Alwatr · Dec 26, 2022 · 138c4ab · 138c4ab
1 parent 0c98606
commit 138c4ab
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 56 deletions.
diff --git a/ui/demo-pwa/src/demo-chat.ts b/ui/demo-pwa/src/demo-chat.ts
diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts
@@ -0,0 +1,55 @@
+import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
+
+import '@alwatr/ui-kit/chat/chat-avatar.js';
+import '@alwatr/ui-kit/chat/chat-bubble.js';
+import '@alwatr/ui-kit/chat/chat-message.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-chat': AlwatrPageHome;
+  }
+}
+
+/**
+ * Alwatr Demo Home Page
+ */
+@customElement('alwatr-page-chat')
+export class AlwatrPageHome extends AlwatrSmartElement {
+  static override styles = [
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+        height: 100%;
+        overflow-y: auto;
+      }
+    `,
+  ];
+
+  override render(): unknown {
+    return html`
+      <p>
+        <alwatr-chat-avatar .user=${'1'}></alwatr-chat-avatar>
+        <alwatr-chat-avatar .user=${'2'}></alwatr-chat-avatar>
+        <alwatr-chat-avatar .user=${'3'}></alwatr-chat-avatar>
+      </p>
+      <p>
+        <alwatr-chat-bubble .message=${'سلام'}></alwatr-chat-bubble>
+        <alwatr-chat-bubble .message=${'چطوری؟'} end-side></alwatr-chat-bubble>
+        <alwatr-chat-bubble
+          .message=${'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+          ' Veritatis quia nemo eaque laboriosam unde consequatur!'}
+        ></alwatr-chat-bubble>
+      </p>
+      <p>
+        <alwatr-chat-message .user=${'1'} .message=${'سلام'}></alwatr-chat-message>
+        <alwatr-chat-message .user=${'2'} .message=${'چطوری؟'} end-side></alwatr-chat-message>
+        <alwatr-chat-message
+          .user=${'3'}
+          .message=${'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+          ' Veritatis quia nemo eaque laboriosam unde consequatur!'}
+        ></alwatr-chat-message>
+      </p>
+    `;
+  }
+}
diff --git a/ui/demo-pwa/src/pwa-root.ts b/ui/demo-pwa/src/pwa-root.ts
@@ -1,7 +1,7 @@
 import {AlwatrRootElement, html} from '@alwatr/element';
 import {customElement} from 'lit/decorators.js';
 
-import './demo-chat.js';
+import './page-chat.js';
 
 import type {RoutesConfig} from '@alwatr/router';
 
@@ -20,7 +20,7 @@ export class AlwatrPwaRoot extends AlwatrRootElement {
     map: (route) => route.sectionList[0]?.toString(),
     list: {
       home: {
-        render: () => html`<alwatr-demo-chat></alwatr-demo-chat>`,
+        render: () => html`<alwatr-page-chat></alwatr-page-chat>`,
       },
     },
   };