From 3a6da0bfb1d4fae2465271ce744792aabf5a424a Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Mon, 22 Apr 2024 05:11:56 -0400
Subject: [PATCH] turn things into components

---
 .../{ImgButton.svelte => Home/Button.svelte}  |  0
 src/lib/components/Home/HeroContainer.svelte  |  7 ++
 src/lib/components/Home/SocialIcon.svelte     | 12 +++
 src/lib/config.js                             |  2 +-
 src/routes/+page.svelte                       | 86 +++++++------------
 5 files changed, 50 insertions(+), 57 deletions(-)
 rename src/lib/components/{ImgButton.svelte => Home/Button.svelte} (100%)
 create mode 100644 src/lib/components/Home/HeroContainer.svelte
 create mode 100644 src/lib/components/Home/SocialIcon.svelte

diff --git a/src/lib/components/ImgButton.svelte b/src/lib/components/Home/Button.svelte
similarity index 100%
rename from src/lib/components/ImgButton.svelte
rename to src/lib/components/Home/Button.svelte
diff --git a/src/lib/components/Home/HeroContainer.svelte b/src/lib/components/Home/HeroContainer.svelte
new file mode 100644
index 0000000..b0f34a3
--- /dev/null
+++ b/src/lib/components/Home/HeroContainer.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let className = '';
+</script>
+
+<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg {className}">
+	<slot />
+</div>
diff --git a/src/lib/components/Home/SocialIcon.svelte b/src/lib/components/Home/SocialIcon.svelte
new file mode 100644
index 0000000..de23921
--- /dev/null
+++ b/src/lib/components/Home/SocialIcon.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let href = '',
+		color = '';
+</script>
+
+<a class="flex text-xl group" {href}>
+	<div
+		class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:{color} group-focus:{color}"
+	>
+		<slot />
+	</div></a
+>
diff --git a/src/lib/config.js b/src/lib/config.js
index baa1bb1..8bf7a74 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -3,6 +3,6 @@ export default {
 	LASTFM: 'RAAAAAAAAAAAH',
 	BLUESKY: 'cirroskais.xyz',
 	TWITTER: '@cirroskais',
-	FEDIVERSE: '@cirroskais@chadthundercock.com',
+	FEDIVERSE: 'https://chadthundercock.com/@cirroskais',
 	GITHUB: 'cirroskais'
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50fc395..7004054 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,9 @@
 	import { page } from '$app/stores';
 	import config from '$lib/config';
 
-	import ImgButton from '$lib/components/ImgButton.svelte';
+	import SocialIcon from '$lib/components/Home/SocialIcon.svelte';
+	import HeroContainer from '$lib/components/Home/HeroContainer.svelte';
+	import ImgButton from '$lib/components/Home/Button.svelte';
 	import Image from '$lib/components/Image.svelte';
 
 	import Discord from '$lib/components/Icons/Discord.svelte';
@@ -19,8 +21,8 @@
 
 <div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
 	<div class="flex p-4 h-full rounded-lg">
-		<div class="my-auto md:w-fit md:mx-auto min-h-max">
-			<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
+		<div class="gap-1 my-auto space-y-1 md:w-fit md:mx-auto">
+			<HeroContainer>
 				<Image
 					style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
 					src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
@@ -30,56 +32,30 @@
 				<p class="my-auto text-3xl md:text-4xl text-neutral-300">
 					{$page.data.discord?.username}
 				</p>
-			</div>
+			</HeroContainer>
 
-			<div
-				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
-			>
-				<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
-					>
-						<Lastfm />
-					</div>
-				</a>
-				<a class="flex group" href="https://github.com/{config.GITHUB}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
-					>
-						<GitHub />
-					</div>
-				</a>
-				<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
-					>
-						<Mastodon />
-					</div>
-				</a>
-				<a class="flex group" href="https://discord.com/users/{config.DISCORD}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-600 group-focus:text-blue-600"
-					>
-						<Discord />
-					</div>
-				</a>
-				<a class="flex group" href="https://x.com/{config.TWITTER}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
-					>
-						<X />
-					</div>
-				</a>
-				<a class="flex group" href="https://bsky.app/profile/{config.BLUESKY}">
-					<div
-						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-400 group-focus:text-blue-400"
-					>
-						<Bluesky />
-					</div>
-				</a>
-			</div>
+			<HeroContainer className="place-content-center space-x-2">
+				<SocialIcon href="https://www.last.fm/user/{config.LASTFM}" color="text-red-500">
+					<Lastfm />
+				</SocialIcon>
+				<SocialIcon href="https://github.com/{config.GITHUB}" color="text-black">
+					<GitHub />
+				</SocialIcon>
+				<SocialIcon href={config.FEDIVERSE} color="text-indigo-700">
+					<Mastodon />
+				</SocialIcon>
+				<SocialIcon href="https://discord.com/users/{config.DISCORD}" color="text-blue-600">
+					<Discord />
+				</SocialIcon>
+				<SocialIcon href="https://x.com/{config.TWITTER}" color="text-black">
+					<X />
+				</SocialIcon>
+				<SocialIcon href="https://bsky.app/profile/{config.BLUESKY}" color="text-blue-400">
+					<Bluesky />
+				</SocialIcon>
+			</HeroContainer>
 
-			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
+			<HeroContainer>
 				<div class="flex space-x-2.5">
 					<Image
 						style="w-16 h-16 md:w-24 md:h-24"
@@ -97,11 +73,9 @@
 						</p>
 					</div>
 				</div>
-			</div>
+			</HeroContainer>
 
-			<div
-				class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
-			>
+			<HeroContainer className="justify-center flex-wrap gap-2 ">
 				<ImgButton href="https://cirroskais.xyz" src="/img/buttons/cirro.png"></ImgButton>
 				<ImgButton href="https://twitter.com/Porpss1" src="/img/buttons/rovin.png"></ImgButton>
 				<ImgButton href="https://split.pet" src="/img/buttons/split.png"></ImgButton>
@@ -112,7 +86,7 @@
 				<ImgButton src="/img/buttons/lol.gif"></ImgButton>
 				<ImgButton src="/img/buttons/twopaws.png"></ImgButton>
 				<ImgButton src="/img/buttons/flag-gaymen.png"></ImgButton>
-			</div>
+			</HeroContainer>
 		</div>
 	</div>
 </div>