fix: Add missing socials (#174)

Co-authored-by: Ushie <ushiekane@gmail.com>

src/layout/Hero/SocialButton.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
 	import type { Social } from '$lib/types';
-	export let social = '';
-	export let data: Social[];
+	export let social: Social;
 </script>
 
-<a
-	href={data.find((jsonSocial) => jsonSocial.name.toLowerCase() === social.toLowerCase())?.url}
-	rel="noreferrer"
-	target="_blank"
->
+<a href={social.url} rel="noreferrer" target="_blank">
 	<div>
-		<img src="socials/{social}.svg" alt={social} />
+		<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
 	</div>
 </a>
 

src/layout/Hero/SocialHost.svelte

@@ -10,10 +10,9 @@
 <div class="social-host">
 	<Query {query} let:data>
 		{#if data}
-			<SocialButton social="github" data={data.socials} />
-			<SocialButton social="discord" data={data.socials} />
-			<SocialButton social="reddit" data={data.socials} />
-			<SocialButton social="telegram" data={data.socials} />
+			{#each data.socials.filter((s) => s.name != 'Website') as social}
+				<SocialButton {social} />
+			{/each}
 		{/if}
 	</Query>
 </div>
@@ -36,6 +35,7 @@
 			left: 0;
 			width: 100%;
 			display: flex;
+			flex-wrap: wrap;
 			justify-content: center;
 		}
 	}