New Badges components: destination, public, status, teams + container/status

apps/ui/src/lib/components/badges/DestinationBadge.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Tooltip from "../Tooltip.svelte";
+  import {initials} from '$lib/common';
+  export let name;
+  export let thingId;
+  let id = 'destination' + thingId;
+  
+</script>
+
+{#if (name||'').length > 0}
+  <span class="badge rounded uppercase text-xs	" id={id}>
+    {initials(name)}
+  </span>
+  <Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>
+{/if}

apps/ui/src/lib/components/badges/PublicBadge.svelte

@@ -0,0 +1,19 @@
+<div title="Public">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 "
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <circle cx="12" cy="12" r="9" />
+    <line x1="3.6" y1="9" x2="20.4" y2="9" />
+    <line x1="3.6" y1="15" x2="20.4" y2="15" />
+    <path d="M11.5 3a17 17 0 0 0 0 18" />
+    <path d="M12.5 3a17 17 0 0 1 0 18" />
+  </svg>
+</div>

apps/ui/src/lib/components/badges/StatusBadge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {getStatus} from '$lib/container/status'
+
+	import { onDestroy, onMount } from 'svelte';
+  export let thing:any;
+  let getting = getStatus(thing)
+  let refreshing:any;
+  let status:any;
+  // AutoUpdates Status every 5 seconds
+  onMount( ()=>{
+    refreshing = setInterval( () =>{
+      getStatus(thing).then( (r) => status = r )
+    }, 5000)
+  })
+  onDestroy( () =>{
+    clearInterval(refreshing);
+  })
+</script>
+{#await getting}
+  <span class="badge badge-lg rounded uppercase">...</span>
+{:then status}
+  <span class="badge badge-lg rounded uppercase badge-status-{status}">
+    {status}
+  </span>
+{/await}

apps/ui/src/lib/components/badges/TeamsBadge.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Tooltip from "../Tooltip.svelte";
+  import {initials} from '$lib/common';
+  export let teams:any;
+  export let thing:any;
+  let id = 'teams' + thing.id;
+</script>
+
+<span>
+  🏢
+  {#each teams as team}
+    <a href={`/iam/teams/${team.id}`} {id} style="color: #99f8; text-decoration: none;">
+			{initials(team.name)}
+    </a>
+    <Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip>
+  {/each}
+</span>