110 lines
4.1 KiB
Svelte
110 lines
4.1 KiB
Svelte
<script lang="ts" context="module">
|
|
export const prerender = false;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
import Countdown from '$lib/components/Countdown.svelte';
|
|
import { auth } from '$lib/stores';
|
|
|
|
onMount(() => {
|
|
$auth.refresh();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head><title>Dashboard | CodeQuest</title></svelte:head>
|
|
|
|
<div class="relative flex min-h-[calc(100vh-164px)] pb-8">
|
|
<main class="container mx-auto pt-4">
|
|
<div class="p-4 text-white bg-indigo-300 rounded-md shadow-md">
|
|
<div class="flex items-center justify-center">
|
|
<span class="text-3xl font-semibold tracking-wider uppercase">
|
|
{#if !$auth.info}
|
|
|
|
{:else if $auth.info?.active}
|
|
<Countdown end={$auth.info.endTime} />
|
|
{:else if new Date($auth.info.endTime) < new Date()}
|
|
Contest Over
|
|
{:else}
|
|
Starting Soon
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-6 mt-4 md:grid-cols-2">
|
|
<div
|
|
class="flex justify-between w-full h-32 bg-white rounded-md shadow-md p-6 pb-2 border border-indigo-400"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs text-indigo-400 uppercase">Welcome</span>
|
|
<span class="text-xl text-indigo-500 font-bold">
|
|
{$auth.info?.currentUser.name || ''}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col items-end justify-end">
|
|
<span class="text-xs text-purple-400 uppercase">Points</span>
|
|
<span class="text-purple-700">
|
|
{$auth.info?.points || 0}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<a class="box h-32 border-sky-600 hover:bg-sky-50" href="/dashboard/leaderboard">
|
|
<span class="txt text-sky-600">
|
|
<!-- prettier-ignore -->
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22,7H16.333V4a1,1,0,0,0-1-1H8.667a1,1,0,0,0-1,1v7H2a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V8A1,1,0,0,0,22,7ZM7.667,19H3V13H7.667ZM14.333,8V19H9.667V5h4.666ZM21,19H16.333V9H21Z"/>
|
|
</svg>
|
|
|
|
Leaderboard
|
|
</span>
|
|
</a>
|
|
<div class="box h-32 border-green-600 hover:bg-green-50">
|
|
<span class="txt text-green-700">
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
Personal Stats
|
|
</span>
|
|
</div>
|
|
<a class="box h-32 border-red-700 hover:bg-red-50" href="/about">
|
|
<span class="txt text-red-700">
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
About
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<a class="grid grid-cols-1 gap-6 my-4 mt-4" href="/dashboard/questions">
|
|
<div class="box h-56 border-2 border-indigo-700 hover:bg-indigo-50">
|
|
<span class="txt txt-lg text-4xl text-indigo-700">
|
|
<!-- prettier-ignore -->
|
|
<svg viewBox="0 0 24 24" class="h-9 w-9 mt-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
<g><path d="M20,8V3a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1V4A2,2,0,0,1,8,4V3A1,1,0,0,0,7,2H1A1,1,0,0,0,0,3V21a1,1,0,0,0,1,1H7a1,1,0,0,0,1-1V20a2,2,0,0,1,4,0v1a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V16a4,4,0,0,0,0-8Zm0,6H19a1,1,0,0,0-1,1v5H14a4,4,0,0,0-8,0H2V4H6a4,4,0,0,0,8,0h4V9a1,1,0,0,0,1,1h1a2,2,0,0,1,0,4Z"/></g>
|
|
</svg>
|
|
Puzzles
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</main>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.box {
|
|
@apply flex items-center justify-center w-full rounded-md shadow-md border;
|
|
@apply transition;
|
|
}
|
|
|
|
.txt {
|
|
@apply inline-flex items-center gap-2;
|
|
@apply text-xl font-bold tracking-wider uppercase;
|
|
}
|
|
|
|
.txt-lg {
|
|
@apply text-4xl;
|
|
}
|
|
</style>
|