From bd95704c8d33f39b4f3ebd0813887379cf992afb Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 15 Feb 2024 05:45:05 +0000
Subject: [PATCH] Introduce Connect Modal

---
 .../thorin-core/src/connect-modal/index.ts    | 24 +++++++++++++++++++
 packages/thorin-core/src/index.ts             |  1 +
 web/index.html                                |  8 +++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/thorin-core/src/connect-modal/index.ts

diff --git a/packages/thorin-core/src/connect-modal/index.ts b/packages/thorin-core/src/connect-modal/index.ts
new file mode 100644
index 0000000..cdde5c1
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/packages/thorin-core/src/index.ts b/packages/thorin-core/src/index.ts
index ffed30c..f553f6c 100644
--- a/packages/thorin-core/src/index.ts
+++ b/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';
diff --git a/web/index.html b/web/index.html
index 2cff17d..1e041fc 100644
--- a/web/index.html
+++ b/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() {