jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-13 02:53: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">
<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">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>
<script lang="ts">
import { onDestroy } from 'svelte';
import { user } from '$lib/stores/user.js';
import { type User } from '@supabase/auth-js';
<h2 class="">Types Collected</h2>
<ul>
<li class="type-list-item font-mono">Fire</li>
</ul>
<br />
any other relevant statistics or achievements
export let data;
let { supabase } = data;
$: ({ supabase } = data);
let localUser: User | null;
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 id="customisation-options">
theme selection
<br />
profile background
<br />
any other features that enhance user experience and personalisation
<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>
<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 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>
{:else}
<p>Please log in to view this page</p>
{/if}
</div>
<style>