<script>
	import Game from "$lib/components/GameListed.svelte";
	import Friend from "$lib/components/UserListed.svelte";
</script>

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

<div class="flex items-center">
	<img class="rounded-full border-2 border-grey-300 w-36 h-36 mx-2 shadow-lg" src="" alt="" />
	<p class="mx-2 font-bold text-3xl">Hello, Only16Characters!</p>
</div>

<div class="my-2">
	<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>
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
	<Friend />
</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>
	<Game />
	<Game />
	<Game />
	<Game />
	<Game />
	<Game />
	<Game />
	<Game />
</div>
