Introduce Connect Modal

packages/thorin-core/src/connect-modal/index.ts

@@ -0,0 +1,24 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('thorin-connect-modal')
+export class ThorinConnectModal extends LitElement {
+    @property({ type: Boolean, reflect: true })
+    open = false;
+
+    static styles = css``;
+
+    render() {
+        return html`
+            <thorin-modal ?open="${this.open}">
+                <div>connect modal</div>
+            </thorin-modal>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'thorin-connect-modal': ThorinConnectModal;
+    }
+}

packages/thorin-core/src/index.ts

@@ -1,5 +1,6 @@
 export { ThorinAvatar } from './avatar';
 export { ThorinButton } from './button';
+export { ThorinConnectModal } from './connect-modal';
 export { ThorinLabel } from './label';
 export { ThorinModal } from './modal';
 export { ThorinTag } from './tag';

web/index.html

@@ -94,6 +94,9 @@ <h2>Modals</h2>
                     <thorin-button onclick="opentestmodal()"
                         >Open Modal</thorin-button
                     >
+                    <thorin-button onclick="openconnectmodal()"
+                        >Open Connect Modal</thorin-button
+                    >
                 </div>
             </div>
         </div>
@@ -110,11 +113,16 @@ <h2>Modals</h2>
                 </thorin-button>
             </div>
         </thorin-modal>
+        <thorin-connect-modal id="connectmodal">
+        </thorin-connect-modal>
         <script src="./index.ts" type="module"></script>
         <script>
             function opentestmodal() {
                 document.getElementById("testmodal").open = true;
             }
+            function openconnectmodal() {
+                document.getElementById("connectmodal").open = true;
+            }
 
             let height = 5;
             function randomizebig() {