style: fix user pages links gap (#280)

Refactor `SocialMediaButton` to make icons optional, and use them for
the pages buttons. This also fixes the gap issues.

**Before**

![image](https://github.com/user-attachments/assets/fc5bc472-b238-4b9a-b15c-4376b7bea2d7)

**After**

![image](https://github.com/user-attachments/assets/a0151963-3d6f-41f2-bb2e-553d88f41444)

src/routes/(app)/[username]/+page.svelte

@@ -302,7 +302,7 @@
 			{#if data.pages.length > 0}
 				<div>
 					<h2 class="mb-4 text-center font-rubik text-2xl font-bold">Pages</h2>
-					<ul class="flex flex-col items-center gap-2">
+					<ul class="flex flex-col items-center gap-8">
 						{#each data.pages as p}
 							<li>
 								<a class="link" href={`/${$page.params.username}/${p.slug}`}>