<script>
	import Game from "$lib/components/GameListed.svelte";
	import Friend from "$lib/components/UserListed.svelte";
	import { page } from "$app/stores";
</script>

<svelte:head>
	<title>Home - Rowblox</title>
</svelte:head>

<div class="flex items-center">
	<img class="rounded-full border-2 border-grey-600 w-36 h-36 mx-2 shadow-lg" src={$page.data.user?.thumbnails.headshot} alt="" />
	<p class="mx-2 font-bold text-3xl">Hello, {$page.data.user?.username}!</p>
</div>

<div class="my-2 min-h-[11rem]">
	<div class="flex items-center mb-2">
		<p class="font-bold text-2xl my-1">Friends</p>
		<span class="flex-grow" />
		<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/my/friends">View All</a>
	</div>
</div>

<div class="my-2">
	<div class="flex items-center">
		<p class="font-bold text-2xl mt-1">Popular Games</p>
		<span class="flex-grow" />
		<a class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/games">View All</a>
	</div>
</div>
