From daae03b40f07ea6e71526690e7629fd4a202428d Mon Sep 17 00:00:00 2001
From: oSumAtrIX <johan.melkonyan1@web.de>
Date: Sun, 3 Mar 2024 02:27:23 +0100
Subject: [PATCH] fix: Add missing socials (#174)

Co-authored-by: Ushie <ushiekane@gmail.com>
---
 src/layout/Hero/SocialButton.svelte | 11 +++--------
 src/layout/Hero/SocialHost.svelte   |  8 ++++----
 static/socials/twitter.svg          |  6 ++++++
 static/socials/youtube.svg          |  9 +++++++++
 4 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 static/socials/twitter.svg
 create mode 100644 static/socials/youtube.svg

diff --git a/src/layout/Hero/SocialButton.svelte b/src/layout/Hero/SocialButton.svelte
index a6772fc..5079b49 100644
--- a/src/layout/Hero/SocialButton.svelte
+++ b/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>
 
diff --git a/src/layout/Hero/SocialHost.svelte b/src/layout/Hero/SocialHost.svelte
index f73bab7..f583f0c 100644
--- a/src/layout/Hero/SocialHost.svelte
+++ b/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;
 		}
 	}
diff --git a/static/socials/twitter.svg b/static/socials/twitter.svg
new file mode 100644
index 0000000..85e060f
--- /dev/null
+++ b/static/socials/twitter.svg
@@ -0,0 +1,6 @@
+<svg width="407" height="407" viewBox="0 0 407 407" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="m237.5 175.17 133.06-154.67h-31.531l-115.54 134.3-92.278-134.3h-106.43l139.54 203.08-139.54 162.2h31.533l122.01-141.82 97.453 141.82h106.43l-144.72-210.61zm-43.188 50.202-14.139-20.223-112.5-160.91h48.432l90.785 129.86 14.139 20.223 118.01 168.8h-48.432l-96.3-137.74z"
+        fill="#d0d0d0" />
+</svg>
\ No newline at end of file
diff --git a/static/socials/youtube.svg b/static/socials/youtube.svg
new file mode 100644
index 0000000..ed2e24b
--- /dev/null
+++ b/static/socials/youtube.svg
@@ -0,0 +1,9 @@
+<svg width="407" height="284.97" viewBox="0 0 407 284.97" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path
+            d="m203.5 0s-127.4-4.7866e-4 -159.25 8.3809c-17.098 4.6935-31.179 18.774-35.873 36.207-8.3813 31.849-8.3809 97.895-8.3809 97.895s-4.7866e-4 66.381 8.3809 97.895c4.6935 17.433 18.44 31.18 35.873 35.873 32.184 8.7166 159.25 8.7168 159.25 8.7168s127.4-1e-3 159.24-8.3828c17.433-4.6936 31.18-18.438 35.873-35.871 8.3813-31.849 8.3809-97.895 8.3809-97.895s0.33573-66.381-8.3809-98.23c-4.6936-17.433-18.44-31.178-35.873-35.871-31.849-8.7166-159.24-8.7168-159.24-8.7168zm-40.566 81.467 105.94 61.016-105.94 61.018z"
+            fill="#d0d0d0" />
+        <path d="m162.93 81.467v122.03l105.94-61.018z" />
+    </g>
+</svg>
\ No newline at end of file