jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-12 18:43:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#32): Link profile page to actual profile

Browse Source
This commit is contained in:
Josh Creek
2024-04-28 13:39:33 +01:00
parent 062eff0433
commit f64f8b2bc6
1 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/profile/+page.svelte
+59 -39
View File
@@ -1,45 +1,65 @@
<div class="h-screen"> <script lang="ts">
<div id="banner"> import { onDestroy } from 'svelte';
<div id="avatar"> import { user } from '$lib/stores/user.js';
<div import { type User } from '@supabase/auth-js';
class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
>
<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
</div>
<button class="btn btn-outline btn-primary">Upload new avatar</button>
</div>
<div id="personal-information">
<p class="text-white font-mono text-3xl font-bold">Username</p>
<p class="text-white font-mono text-3xl font-bold">Title</p>
<p class="text-white font-mono text-3xl font-bold">Level</p>
</div>
</div>
<div id="profile-content">
<div id="pokemon-collection-summary">
<div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
<div class="caught-text top-20 left-30 font-mono text-xl">
<p>Total Pokemon Caught</p>
</div>
<h2 class="">Types Collected</h2> export let data;
<ul> let { supabase } = data;
<li class="type-list-item font-mono">Fire</li> $: ({ supabase } = data);
</ul>
<br /> let localUser: User | null;
any other relevant statistics or achievements const unsubscribe = user.subscribe((value) => {
localUser = value;
});
onDestroy(unsubscribe);
</script>
<div class="h-screen">
{#if localUser}
<div id="banner">
<div id="avatar">
<div
class="avatar mt-10 ml-20 w-14 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
>
<div class="rounded-full"><img src="/OIG5.jpg" alt="profile icon" /></div>
</div>
<button class="btn btn-outline btn-primary">Upload new avatar</button>
</div>
<div id="personal-information">
<p class="text-white font-mono text-3xl font-bold">{localUser?.email}</p>
<p class="text-white font-mono text-3xl font-bold">Title</p>
<p class="text-white font-mono text-3xl font-bold">Level</p>
</div>
</div> </div>
<div id="customisation-options"> <div id="profile-content">
theme selection <div id="pokemon-collection-summary">
<br /> <div class="radial-progress top-0 left-0" style="--value:70;" role="progressbar">70%</div>
profile background <div class="caught-text top-20 left-30 font-mono text-xl">
<br /> <p>Total Pokemon Caught</p>
any other features that enhance user experience and personalisation </div>
<h2 class="">Types Collected</h2>
<ul>
<li class="type-list-item font-mono">Fire</li>
</ul>
<br />
any other relevant statistics or achievements
</div>
<div id="customisation-options">
theme selection
<br />
profile background
<br />
any other features that enhance user experience and personalisation
</div>
<div id="social-sharing">
options for users to share their profile or achievements on social media platforms,
encouraging engagement and interaction with other users
</div>
</div> </div>
<div id="social-sharing"> {:else}
options for users to share their profile or achievements on social media platforms, <p>Please log in to view this page</p>
encouraging engagement and interaction with other users {/if}
</div>
</div>
</div> </div>
<style> <style>