Added a competition page

flightscore/src/components/ui-badge.ts

@@ -1,47 +1,47 @@
 // components/ui-badge.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 
-export type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'muted';
+export type BadgeVariant = "accent" | "success" | "warning" | "error" | "muted";
 
-@customElement('ui-badge')
+@customElement("ui-badge")
 export class UiBadge extends LitElement {
   static styles = css`
     :host {
       display: inline-flex;
     }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.35rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  border-radius: 2rem;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  line-height: 1;
-}
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.35rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      border-radius: 2rem;
+      border: 1px solid transparent;
+      white-space: nowrap;
+      line-height: 1;
+    }
 
-.icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
 
-.icon ::slotted(svg) {
-  width: 0.85rem;
-  height: 0.85rem;
-}
+    .icon ::slotted(svg) {
+      width: 0.85rem;
+      height: 0.85rem;
+    }
 
-.label {
-  display: inline-flex;
-  align-items: center;
-  padding-top: 0.05em;
-}
+    .label {
+      display: inline-flex;
+      align-items: center;
+      padding-top: 0.05em;
+    }
 
     .badge.accent {
       color: var(--color-accent);
@@ -62,9 +62,9 @@ export class UiBadge extends LitElement {
     }
 
     .badge.error {
-        color: #e5484d;
-        background: color-mix(in srgb, #e5484d 10%, transparent);
-        border-color: color-mix(in srgb, #e5484d 25%, transparent);
+      color: #e5484d;
+      background: color-mix(in srgb, #e5484d 10%, transparent);
+      border-color: color-mix(in srgb, #e5484d 25%, transparent);
     }
 
     .badge.muted {
@@ -74,7 +74,7 @@ export class UiBadge extends LitElement {
     }
   `;
 
-  @property() variant: BadgeVariant = 'accent';
+  @property() variant: BadgeVariant = "accent";
   @state() private hasIcon = false;
 
   private handleSlotChange(e: Event) {
@@ -84,16 +84,20 @@ export class UiBadge extends LitElement {
 
   render() {
     return html`
-    <span class="badge ${this.variant}">
-      ${this.hasIcon
-      ? html`<span class="icon">
-        <slot name="icon" @slotchange=${this.handleSlotChange}></slot>
-      </span>`
-      : html`<slot name="icon" @slotchange=${this.handleSlotChange} style="display:none"></slot>`}
-      <span class="label">
-        <slot></slot>
+      <span class="badge ${this.variant}">
+        ${this.hasIcon
+          ? html`<span class="icon">
+              <slot name="icon" @slotchange=${this.handleSlotChange}></slot>
+            </span>`
+          : html`<slot
+              name="icon"
+              @slotchange=${this.handleSlotChange}
+              style="display:none"
+            ></slot>`}
+        <span class="label">
+          <slot></slot>
+        </span>
       </span>
-    </span>
-  `;
+    `;
   }
-}
+}