Updates and more

src/components/dashboard/UserInfo.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import {t} from "astro-i18n";
+    import type {Player} from "../types/data.ts";
+    import {tokenStore} from "../repo/repo.ts";
+    import {l} from "../../util/util.ts";
+
+    export let user: Player;
+
+    function logout() {
+        tokenStore.set("")
+        window.location.href = l("/login")
+    }
+</script>
+<div class="flex mb-4 flex-col md:flex-row">
+    <div>
+        <div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg hidden md:block
+									hover:scale-105 hover:shadow-2xl
+									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
+            <figure>
+                <figcaption class="text-center mb-4 text-2xl">{user.name}</figcaption>
+                <img src={`https://visage.surgeplay.com/bust/150/${user.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={user.name + "s bust"} width="150" height="150" />
+            </figure>
+        </div>
+        <div class="flex flex-wrap">
+            <button class="btn mt-2" on:click={logout}>{t("dashboard.buttons.logout")}</button>
+            {#if user.perms.includes("MODERATION")}
+                <a class="btn w-fit mt-2" href="/admin">{t("dashboard.buttons.admin")}</a>
+            {/if}
+        </div>
+    </div>
+    <div>
+        <h1 class="text-4xl font-bold">{t("dashboard.title", {name: user.name})}</h1>
+        <p>{t("dashboard.rank", {rank: t("home.prefix." + user.prefix)})}</p>
+        <p>{t("dashboard.permissions")}</p>
+        <ul>
+            {#each user.perms as permission}
+                <li class="list-disc ml-6">{permission}</li>
+            {/each}
+        </ul>
+    </div>
+</div>