init

lib/components/bio/widgets/DiscordUser.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import DiscordStatus from './Discord/Status.svelte';
+  import Panel from '../elements/Panel.svelte';
+
+  //@ts-ignore
+  export let data: WidgetDiscord;
+  export let handle: boolean = false;
+  export let isPreview: boolean = false;
+</script>
+
+<Panel preview={isPreview} {handle}>
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-between items-center">
+      <div class="flex gap-4 items-center">
+        <div
+          class="avatar w-10 h-10 rounded-full bg-center bg-cover"
+          style={data.avatar ? `--avatar: url(${data.avatar})` : undefined} />
+        <p class="font-medium">@{data.username}</p>
+      </div>
+      <div>
+        <!-- TODO: Discord badges -->
+      </div>
+    </div>
+    {#if data.activity || data.status}
+      <p>
+        Currently <DiscordStatus status={data.status} activity={data.activity} />
+        {#if data.activity}
+          playing <span class="contents font-medium">{data.activity}</span>.
+        {/if}
+      </p>
+    {/if}
+  </div>
+</Panel>
+
+<style lang="postcss">
+  div.avatar {
+    @apply bg-accent;
+    background-image: var(--avatar);
+  }
+</style>