63 lines
1.6 KiB
Svelte
63 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { UserProfilePage } from "./+page";
|
|
import { getUserFromLocalstorage as getUser } from '$lib/auth/session';
|
|
import { formatTime } from '$lib/utils/utils';
|
|
import { onMount } from 'svelte';
|
|
|
|
export let data: UserProfilePage;
|
|
const user = getUser();
|
|
|
|
const userCreatedDate = Date.parse(data.user.created);
|
|
let dateNow: number;
|
|
$: timeSinceCreation = formatTime(dateNow - userCreatedDate);
|
|
|
|
function updateCurrentTime() {
|
|
dateNow = Date.now()
|
|
setTimeout(updateCurrentTime, 1000);
|
|
}
|
|
|
|
onMount(async () => {
|
|
updateCurrentTime();
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="grow flex flex-col items-center justify-center gap-y-4 px-4">
|
|
{#if user.id === data.user.id}
|
|
<h1>My Profile</h1>
|
|
{:else}
|
|
<h1>{`${data.user.first_name} ${data.user.last_name}'s Profile`}</h1>
|
|
{/if}
|
|
|
|
<div class="profileInfo">
|
|
<p class="description">First Name</p><p class="data">{data.user.first_name}</p>
|
|
<p class="description">Last Name</p><p class="data">{data.user.last_name}</p>
|
|
<p class="description">Email</p><p class="data">{data.user.email}</p>
|
|
<p class="description">Member Since</p><p class="data">{timeSinceCreation}</p>
|
|
</div>
|
|
|
|
<a class="button"
|
|
href={`/users/${data.user.id}/todos`}
|
|
>
|
|
View Todos
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
h1 {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
div.profileInfo {
|
|
@apply grid grid-cols-3 gap-x-2 gap-y-4;
|
|
@apply p-4 rounded-lg;
|
|
@apply border-2 border-secondary/50;
|
|
}
|
|
|
|
p.description {
|
|
@apply text-secondary font-semibold text-end;
|
|
}
|
|
p.data{
|
|
@apply col-span-2;
|
|
}
|
|
</style>
|