<script lang="ts">
	import Window from '$lib/components/window.svelte';
	import Link from '$lib/components/link.svelte';

	//social links
	import discord from '$lib/assets/img/socials/discord.svg';
	import roblox from "$lib/assets/img/socials/roblox.svg";
	import git from "$lib/assets/img/socials/git.svg";
	import github from "$lib/assets/img/socials/github.svg";
</script>

<div class="container">
	<h1>Links</h1>
	<Window name="socials">
		<div class="links">
			<Link link="discord" img="{discord}" redirect={false}>genki_angel</Link>
			<Link link="https://www.roblox.com/users/1757381" name="https://roblox.com" img="{roblox}">
				i play roblox sometimes...
			</Link>
		</div>
	</Window>
	<Window name="repos">
		<div class="links">
			<Link link="https://git.banii.cafe" img="{git}">all my latest repos are<br>saved here ^w^</Link>
			<Link link="https://github.com/genki-angel" name="https://github.com" img="{github}"
				>very inactive</Link
			>
		</div>
	</Window>
</div>

<style lang="scss">
	@use '$lib/styles/variables' as vars;
	h1 {
		text-align: center;
		font-size: 3em;
		width: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;

		padding: 1em;
		gap: 1em;
	}
	.links {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
</style>
