53 lines
2.1 KiB
Svelte
53 lines
2.1 KiB
Svelte
<script>
|
|
export let data;
|
|
|
|
const joinDate = new Date(data.profile?.joinDate);
|
|
const lastOnline = new Date(data.profile?.lastOnline);
|
|
</script>
|
|
|
|
<div class="mx-auto rounded-lg flex shadow border border-gray-300 px-2 py-1.5">
|
|
<img class="rounded-full border-2 border-grey-600 h-28 shadow-lg mr-2" src="/img/headshot.png" alt="" />
|
|
<div class="flex flex-col place-content-between pt-2 pb-1.5">
|
|
<p class="text-3xl font-bold">{data.profile?.username}</p>
|
|
<div class="flex text-lg">
|
|
<p class="mr-4"><a class="font-bold" href="/users/id/friends">0</a> Friends</p>
|
|
<p class="mr-4"><a class="font-bold" href="/users/id/followers">0</a> Followers</p>
|
|
<p><a class="font-bold" href="/users/id/following">0</a> Following</p>
|
|
</div>
|
|
</div>
|
|
<span class="flex-grow" />
|
|
<div class="flex place-content-between place-self-end py-1">
|
|
<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 text-gray-500 shadow-lg hover:bg-gray-200" href="/users/id/message">Message</a>
|
|
<button class="px-3 py-1 rounded border-2 border-blue-500 text-blue-500 shadow-lg hover:bg-blue-200">Add Friend</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row my-2">
|
|
<div class="w-full rounded-lg shadow border border-gray-300 p-4">
|
|
<p class="text-2xl font-bold">About</p>
|
|
<div class="divide-y">
|
|
<img class="mx-auto w-96" src="/img/bodyshot.png" alt="" />
|
|
<p class="text-center py-2">{data.profile?.bio}</p>
|
|
<div class="flex flex-row text-center pt-2">
|
|
<div class="flex flex-col mx-auto">
|
|
<p class="font-bold text-zinc-400">Join Date</p>
|
|
<p>{joinDate.getMonth() + 1}/{joinDate.getDate()}/{joinDate.getFullYear()}</p>
|
|
</div>
|
|
<div class="flex flex-col mx-auto">
|
|
<p class="font-bold text-zinc-400">Last Online</p>
|
|
<p>{lastOnline.getMonth() + 1}/{lastOnline.getDate()}/{lastOnline.getFullYear()}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col w-full ml-1">
|
|
<div class="border border-gray-300 rounded-lg w-full flex-auto mb-1 shadow p-4">
|
|
<p class="text-2xl font-bold">Games</p>
|
|
</div>
|
|
<div class="border border-gray-300 rounded-lg w-full flex-auto shadow p-4">
|
|
<p class="text-2xl font-bold">Friends</p>
|
|
</div>
|
|
</div>
|
|
</div>
|