From c3cdb9406869dff6a56d63f576e4b1da781fa823 Mon Sep 17 00:00:00 2001
From: Karen Chen <145727980+Karencheenn@users.noreply.github.com>
Date: Tue, 6 Jan 2026 19:20:17 -0500
Subject: [PATCH] [refac] Replace <a> with Link and button for Quick Links

---
 src/components/Button.svelte     | 31 ++++++++---
 src/components/Link.svelte       | 27 +++++++--
 src/components/QuickLinks.svelte | 23 ++++++++
 src/routes/+page.svelte          | 95 ++++----------------------------
 4 files changed, 78 insertions(+), 98 deletions(-)
 create mode 100644 src/components/QuickLinks.svelte

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 8334542..137e057 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,14 +1,29 @@
 <script lang="ts">
-	let { children, onclick = null } = $props();
+	type ButtonSize = 'sm' | 'md' | 'lg';
+
+	let {
+		children,
+		onclick = null,
+		disabled = false,
+		size = 'md' as ButtonSize,
+		class: className = ''
+	} = $props();
+
+	const sizeClasses: Record<ButtonSize, string> = {
+		sm: 'px-3 py-1.5',
+		md: 'px-4 py-2',
+		lg: 'px-2 py-2'
+	};
 </script>
 
 <button
-	class="bg-ecsess-600 hover:bg-ecsess-500 active:bg-ecsess-700
-            inline-block rounded-md border-none px-4
-            py-2 text-white transition-all
-            duration-200 ease-out
-            hover:scale-105 hover:shadow-xl"
-	{onclick}
+	disabled={disabled}
+	onclick={onclick}
+	class="rounded-md border border-ecsess-200 bg-ecsess-500
+		{sizeClasses[size]}
+		text-sm font-semibold text-ecsess-50 transition-colors
+		hover:bg-ecsess-600/50 hover:border-ecsess-300
+		disabled:pointer-events-none disabled:opacity-50 {className}"
 >
-	{@render children()}
+	{@render children?.()}
 </button>
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index f27f926..54cf297 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -1,7 +1,24 @@
-<script>
-	let { href = 'https://www.example.com', children } = $props();
+<script lang="ts">
+	let {
+		href = undefined,
+		external = false,
+		button = false,
+		children,
+		class: className = ''
+	} = $props();
 </script>
 
-<a {href} target="_blank" rel="noopener noreferrer" class="underline">
-	{@render children()}
-</a>
+{#if href}
+	<a
+		href={href}
+		class="{button ? '' : 'underline'} {className}"
+		target={external ? '_blank' : undefined}
+		rel={external ? 'noopener noreferrer' : undefined}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<span class={className}>
+		{@render children?.()}
+	</span>
+{/if}
diff --git a/src/components/QuickLinks.svelte b/src/components/QuickLinks.svelte
new file mode 100644
index 0000000..4f4bee4
--- /dev/null
+++ b/src/components/QuickLinks.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Link from 'components/Link.svelte';
+	import Button from 'components/Button.svelte';
+</script>
+
+<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+	<Link href="/events" button>
+		<Button class="w-full">ECSESS Events</Button>
+	</Link>
+
+	<Link href="/r/trot5th" external button>
+		<Button class="w-full">Trottier 5th booking</Button>
+	</Link>
+
+    <Link href="/r/ctrlz" external button>
+        <Button size="lg" class="w-full">Ctrl+Z (feedback) form</Button>
+    </Link>
+
+	<!-- Sponsorship disabled -->
+	<Link button>
+		<Button disabled class="w-full">Sponsorship</Button>
+	</Link>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 094951e..77e82ba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import AffiliatedClubs from 'components/homepage/AffiliatedClubs.svelte';
 	import { fade } from 'svelte/transition';
+	import QuickLinks from 'components/QuickLinks.svelte';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -33,56 +34,18 @@
 					<RichText value={data.description} />
 				</div>
 
-				<!-- Quick Links (Desktop only) -->
+				<!-- Quick Links (Desktop) -->
 				<div class="hidden lg:block p-4">
-					<!-- Quick Links -->
 					<div class="mt-6">
 						<p
 							class="mt-8 mb-4 text-center text-base font-bold tracking-wide
 								text-ecsess-50
 								underline decoration-ecsess-200 decoration-2 underline-offset-8
 								drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
-						>Commonly searched for
+						>
+							Commonly searched for
 						</p>
-
-						<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-							<a
-								href="/events"
-								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-									text-center text-sm font-semibold text-ecsess-50 transition-colors
-									hover:bg-ecsess-600/50 hover:border-ecsess-300"
-							>ECSESS Events
-							</a>
-
-							<a
-								href="/r/trot5th"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-									text-center text-sm font-semibold text-ecsess-50 transition-colors
-									hover:bg-ecsess-600/50 hover:border-ecsess-300"
-							>Trottier 5th booking
-							</a>
-
-							<a
-								href="/r/ctrlz"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
-									text-center text-sm font-semibold text-ecsess-50 transition-colors
-									hover:bg-ecsess-600/50 hover:border-ecsess-300"
-							>Ctrl+Z (feedback) form
-							</a>
-
-							<a
-								aria-disabled="true"
-								tabindex="-1"
-								class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-									text-center text-sm font-semibold text-ecsess-50 transition-colors
-									hover:bg-ecsess-600/50 hover:border-ecsess-300"
-							>Sponsorship
-							</a>
-						</div>
+						<QuickLinks />
 					</div>
 				</div>
 			</div>
@@ -90,7 +53,7 @@
 
 		<!-- Image -->
 		<div class="order-2 m-2 lg:order-2 lg:col-span-2 lg:mx-12 lg:my-0">
-			<div class="lg:sticky lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
+			<div class="lg:top-16 lg:h-[calc(100vh-7rem)] lg:flex lg:items-center lg:justify-center">
 				<img
 					src={data.councilPhoto}
 					alt="ECSESS Council"
@@ -99,56 +62,18 @@
 			</div>
 		</div>
 
-		<!-- Quick Links -->
+		<!-- Quick Links (mobile) -->
 		<div class="order-3 p-4 lg:hidden">
-			<!-- Quick Links -->
 			<div class="mt-6">
 				<p
 					class="mt-8 mb-4 text-center text-base font-bold tracking-wide
 						text-ecsess-50
 						underline decoration-ecsess-200 decoration-2 underline-offset-8
 						drop-shadow-[0_6px_24px_rgba(0,0,0,0.75)]"
-				>Commonly searched for
+				>
+					Commonly searched for
 				</p>
-
-				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-					<a
-						href="/events"
-						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-							text-center text-sm font-semibold text-ecsess-50 transition-colors
-							hover:bg-ecsess-600/50 hover:border-ecsess-300"
-					>ECSESS Events
-					</a>
-
-					<a
-						href="/r/trot5th"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-							text-center text-sm font-semibold text-ecsess-50 transition-colors
-							hover:bg-ecsess-600/50 hover:border-ecsess-300"
-					>Trottier 5th booking
-					</a>
-
-					<a
-						href="/r/ctrlz"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-2 py-2
-							text-center text-sm font-semibold text-ecsess-50 transition-colors
-							hover:bg-ecsess-600/50 hover:border-ecsess-300"
-					>Ctrl+Z (feedback) form
-					</a>
-
-					<a
-						aria-disabled="true"
-						tabindex="-1"
-						class="rounded-md border border-ecsess-200 bg-ecsess-500 px-4 py-2
-							text-center text-sm font-semibold text-ecsess-50 transition-colors
-							hover:bg-ecsess-600/50 hover:border-ecsess-300"
-					>Sponsorship
-					</a>
-				</div>
+				<QuickLinks />
 			</div>
 		</div>
 	</div>