initial commit

src/lib/UserAbout.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import AsideCard from "./AsideCard.svelte";
+    import { RiCake2Line, RiCakeLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
+    import { DateTime } from 'luxon';
+    import type { UserEntry } from "./backend";
+
+  
+let { user }: { user: UserEntry } = $props();
+
+let { badges = [] } = user;
+
+</script>
+
+{#if user}
+<AsideCard title={'About ' + (user.display_name? `${user.display_name} (@${user.username})` : `@${user.username}`)}>
+  <ul>
+    {#if user.biography}
+    <li><RiInfoCardLine /> {user.biography}</li>
+    {/if}
+    <li><RiCake2Line /> {user.age} years old
+    {#if user.age < 18}<span class="error">(MINOR)</span>{/if}
+    </li>
+    {#if user.joined_at}
+    <li><RiCakeLine /> Cake day: {DateTime.fromISO(user.joined_at).toFormat('d LLL yyyy')}</li>
+    {/if}
+    {#if badges.indexOf('administrator') >= 0}
+    <li><RiShieldStarLine /> Administrator</li>
+    {/if}
+  </ul>
+</AsideCard>
+
+<button class="card">Follow</button>
+{/if}
+
+<style>
+  
+</style>