CREDENTIAL TYPE MANAGEMENT WORKS

2026-02-14 15:16:06 -06:00
parent 51db9de171
commit 140e6c416a
17 changed files with 1251 additions and 153 deletions
@@ -0,0 +1,71 @@
+<script lang="ts">
+  export let message: string = "No results found";
+  export let size: number = 160;
+</script>
+
+<div class="monkey" style="width: {size}px">
+  <svg viewBox="0 0 120 120" width="100%" height="100%" aria-hidden="true">
+    <!-- head -->
+    <circle cx="60" cy="60" r="44" fill="#8B5E3C" />
+    <!-- face -->
+    <ellipse cx="60" cy="70" rx="30" ry="24" fill="#E8C9A1" />
+    <!-- ears -->
+    <circle cx="26" cy="56" r="12" fill="#8B5E3C" />
+    <circle cx="94" cy="56" r="12" fill="#8B5E3C" />
+    <circle cx="26" cy="56" r="6" fill="#E8C9A1" />
+    <circle cx="94" cy="56" r="6" fill="#E8C9A1" />
+    <!-- eyes -->
+    <circle cx="48" cy="64" r="6" fill="#2b2b2b" />
+    <circle cx="72" cy="64" r="6" fill="#2b2b2b" />
+    <!-- smile -->
+    <path
+      d="M48 78 Q60 88 72 78"
+      stroke="#2b2b2b"
+      stroke-width="3"
+      fill="none"
+      stroke-linecap="round"
+    />
+    <!-- eyebrow accents -->
+    <path
+      d="M42 58 Q48 54 54 58"
+      stroke="#6b4a33"
+      stroke-width="2"
+      fill="none"
+      stroke-linecap="round"
+      opacity="0.6"
+    />
+    <path
+      d="M66 58 Q72 54 78 58"
+      stroke="#6b4a33"
+      stroke-width="2"
+      fill="none"
+      stroke-linecap="round"
+      opacity="0.6"
+    />
+    <!-- tiny tuft -->
+    <path
+      d="M60 28 Q58 34 62 36"
+      stroke="#6b4a33"
+      stroke-width="3"
+      fill="none"
+      stroke-linecap="round"
+    />
+  </svg>
+  <div class="msg">{message}</div>
+</div>
+
+<style>
+  .monkey {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin: 1.5rem auto;
+  }
+  .msg {
+    color: #6b7280;
+    font-size: 0.95rem;
+    text-align: center;
+  }
+</style>
@@ -0,0 +1,49 @@
+<script lang="ts">
+  export let size: number = 36;
+  export let color: string = "#0366d6";
+</script>
+
+<div class="rs" aria-hidden="true" style="width: {size}px; height: {size}px;">
+  <svg viewBox="0 0 50 50" class="spin" width="100%" height="100%">
+    <circle
+      class="bg"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke="#e6eef6"
+      stroke-width="6"
+    />
+    <path
+      class="arc"
+      d="M25 5 a20 20 0 0 1 0 40"
+      stroke-linecap="round"
+      fill="none"
+      stroke-width="6"
+      stroke={color}
+    />
+  </svg>
+</div>
+
+<style>
+  .rs {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .spin {
+    transform-origin: center;
+    animation: rs-spin 0.9s linear infinite;
+    display: block;
+  }
+
+  .arc {
+    stroke-linecap: round;
+  }
+
+  @keyframes rs-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>