From adc81ded8afd832eb7e771d1e49502ce514bdd7f Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 15 Feb 2024 03:17:20 +0000
Subject: [PATCH] Bump

---
 packages/thorin-core/src/avatar/index.ts | 118 +++++++++++++++++++++++
 packages/thorin-core/src/index.ts        |   1 +
 packages/thorin-core/src/style.css       |  24 ++---
 web/index.html                           |   4 +
 4 files changed, 135 insertions(+), 12 deletions(-)
 create mode 100644 packages/thorin-core/src/avatar/index.ts

diff --git a/packages/thorin-core/src/avatar/index.ts b/packages/thorin-core/src/avatar/index.ts
new file mode 100644
index 0000000..aed7ad5
--- /dev/null
+++ b/packages/thorin-core/src/avatar/index.ts
@@ -0,0 +1,118 @@
+/* eslint-disable sonarjs/no-nested-template-literals */
+/* eslint-disable unicorn/template-indent */
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('thorin-avatar')
+export class ThorinAvatar extends LitElement {
+    static styles = css`
+        :host {
+            display: inline-flex;
+            width: 48px;
+            height: 48px;
+            position: relative;
+            justify-content: center;
+            align-items: center;
+            background: var(--thorin-grey-surface);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        img {
+            width: 48px;
+            height: 48px;
+            object-fit: cover;
+            position: absolute;
+            inset: 0;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid #3498db;
+            width: 32px;
+            height: 32px;
+            -webkit-animation: spin 2s linear infinite; /* Safari */
+            animation: spin 2s linear infinite;
+            position: absolute;
+            inset: 0;
+            margin: 4px;
+        }
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .fallback-svg {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background-color: #f0f0f0;
+        }
+    `;
+
+    @property({ type: String })
+    name: string = '';
+
+    @state()
+    private loading: boolean = true;
+
+    @state()
+    private imgError: boolean = false;
+
+    render() {
+        const avatarUrl = `https://enstate.rs/i/${this.name}`;
+
+        return html`
+            ${this.loading ? html`<div class="spinner"></div>` : ''}
+            ${this.imgError
+                ? html`<svg
+                      class="fallback-svg"
+                      viewBox="0 0 48 48"
+                      xmlns="http://www.w3.org/2000/svg"
+                  >
+                      <circle cx="24" cy="24" r="24" fill="#cccccc" />
+                      <text
+                          x="50%"
+                          y="50%"
+                          dy=".3em"
+                          fill="black"
+                          font-size="12"
+                          text-anchor="middle"
+                      >
+                          ?
+                      </text>
+                  </svg>`
+                : html`<img
+                      src="${avatarUrl}"
+                      @load="${this.handleLoad}"
+                      @error="${this.handleError}"
+                  />`}
+        `;
+    }
+
+    handleLoad() {
+        this.loading = false;
+        this.imgError = false;
+    }
+
+    handleError() {
+        this.loading = false;
+        this.imgError = true;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'thorin-avatar': ThorinAvatar;
+    }
+}
diff --git a/packages/thorin-core/src/index.ts b/packages/thorin-core/src/index.ts
index d4a2f9e..d24091c 100644
--- a/packages/thorin-core/src/index.ts
+++ b/packages/thorin-core/src/index.ts
@@ -1,3 +1,4 @@
+export { ThorinAvatar } from './avatar';
 export { ThorinButton } from './button';
 export { ThorinModal } from './modal';
 
diff --git a/packages/thorin-core/src/style.css b/packages/thorin-core/src/style.css
index 520fb09..9ac9340 100644
--- a/packages/thorin-core/src/style.css
+++ b/packages/thorin-core/src/style.css
@@ -114,12 +114,12 @@ p {
     --thorin-green-bright: #1EB789;
     --thorin-green-light: #CBE7DC;
     --thorin-green-surface: #E7F4EF;
-    --thorin-gray-primary: #9B9BA7;
-    --thorin-gray-active: #1E2122;
-    --thorin-gray-dim: #595959;
-    --thorin-gray-bright: #B6B6BF;
-    --thorin-gray-light: #E8E8E8;
-    --thorin-gray-surface: #F6F6F6;
+    --thorin-grey-primary: #9B9BA7;
+    --thorin-grey-active: #1E2122;
+    --thorin-grey-dim: #595959;
+    --thorin-grey-bright: #B6B6BF;
+    --thorin-grey-light: #E8E8E8;
+    --thorin-grey-surface: #F6F6F6;
     --thorin-text-primary: #1E2122;
     --thorin-text-secondary: #9B9BA7;
     --thorin-text-accent: #FFFFFF;
@@ -180,12 +180,12 @@ p {
         --thorin-green-bright: #158463;
         --thorin-green-light: #104A38;
         --thorin-green-surface: #153C31;
-        --thorin-gray-primary: #9B9BA7;
-        --thorin-gray-active: #F6F6F6;
-        --thorin-gray-dim: #E8E8E8;
-        --thorin-gray-bright: #5D5C62;
-        --thorin-gray-light: #424347;
-        --thorin-gray-surface: #141416;
+        --thorin-grey-primary: #9B9BA7;
+        --thorin-grey-active: #F6F6F6;
+        --thorin-grey-dim: #E8E8E8;
+        --thorin-grey-bright: #5D5C62;
+        --thorin-grey-light: #424347;
+        --thorin-grey-surface: #141416;
         --thorin-text-primary: #FFFFFF;
         --thorin-text-secondary: #9B9BA7;
         --thorin-text-accent: #FFFFFF;
diff --git a/web/index.html b/web/index.html
index 97d3722..b86944e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -13,6 +13,10 @@ <h1>thorin.design</h1>
     <thorin-button>hello world</thorin-button>
     <thorin-button>hello world</thorin-button>
     <thorin-modal open>
+        <p>Hello world</p>
+        <thorin-avatar name="luc.eth"></thorin-avatar>
+        <thorin-avatar name="domico.eth"></thorin-avatar>
+        <thorin-avatar name="nick.eth"></thorin-avatar>
         <p>Hello world</p>
         <p id="big">This component gets bigger.</p>
     </thorin-modal>