<script lang="ts">
	import { Separator } from '$lib/components/ui/separator';
	import { OpenInNewWindow } from 'radix-icons-svelte';
	import Emfed from '$lib/components/Emfed.svelte';
</script>

<svelte:head>
	<title>Home</title>
	<meta name="description" content="Landing Page for neshweb.net" />
</svelte:head>

<div class="flex max-h-full flex-row justify-center justify-around gap-4 overflow-auto p-8">
	<div class="flex flex-1 flex-col items-center">
		<div class="flex flex-col gap-y-2 rounded-md border bg-black/55 p-4 backdrop-blur-sm">
			<h1 class="text-center text-2xl">Home Page</h1>
			<p>
				I'm not sure what to put here quite yet, maybe I'll think of something eventually. In the
				meantime I've linked some of my accounts in the sidebar to the right
			</p>
		</div>
	</div>
	<div
		class="flex w-[22rem] flex-col items-center gap-y-1 overflow-auto rounded-md border bg-black/55 py-1 backdrop-blur-sm"
	>
		<p class="font-bold">Fediverse Accounts</p>
		<Separator class="max-w-80" />
		<a
			rel="me"
			href="https://mastodon.neshweb.net/@neshura"
			target="_blank"
			class="flex flex-row items-center gap-1 hover:text-secondary"
		>
			Mastodon
			<OpenInNewWindow />
		</a>
		<a
			rel="noopener noreferrer"
			href="https://bookwormstory.social/u/Neshura"
			target="_blank"
			class="flex flex-row items-center gap-1 hover:text-secondary"
		>
			Lemmy
			<OpenInNewWindow />
		</a>
		<a
			rel="noopener noreferrer"
			href="https://neshweb.tv/c/neshura_ch/videos"
			target="_blank"
			class="flex flex-row items-center gap-1 hover:text-secondary"
		>
			PeerTube
			<OpenInNewWindow />
		</a>
		<Separator class="max-w-80" />
		<p class="font-bold">Mastodon Feed</p>
		<Separator class="max-w-80" />
		<Emfed
			account="https://mastodon.neshweb.net/@neshura"
			maxToots={4}
			accountId="109199738141333007"
		/>
	</div>
</div>