feat: add hover coord image (#165)

UW-UPL · Sep 5, 2023 · 45a47b6 · 45a47b6
1 parent 6abe5ea
commit 45a47b6
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/public/profiles/pranav-dronavalli-happy.jpg b/public/profiles/pranav-dronavalli-happy.jpg
diff --git a/public/profiles/pranav-dronavalli-sad.jpg b/public/profiles/pranav-dronavalli-sad.jpg
diff --git a/public/profiles/pranav-dronavalli.jpg b/public/profiles/pranav-dronavalli.jpg
diff --git a/src/components/CoordCard.astro b/src/components/CoordCard.astro
@@ -41,21 +41,37 @@ const additionalImgStyles = isHorizontal
 	: "inset-0 overflow-hidden rounded-t-md w-full";
 
 const iconSizeStyle = isHorizontal ? "w-6" : "w-1/12";
----
 
+const hoverImageUrl = coord.data.hover_image ? `/profiles/${coord.data.hover_image}` : null;
+const originalImageUrl = coord.data.image ? `/profiles/${coord.data.image}` : null;
+---
 <div
 	class={"hover:-translate-y-1 hover:scale-110 duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-red-800/50 shadow-xl font-lato text-gray-700 h-fit block bg-red-50 rounded-md " +
 		additionalCardStyles}
 >
 	{
-		coordInfo.image && (
+		coordInfo.image && hoverImageUrl == null && (
 			<img
 				src={`/profiles/${coord.data.image}`}
 				alt={coordInfo.name}
 				class={"aspect-square object-cover " + additionalImgStyles}
 			/>
 		)
 	}
+	{
+		coordInfo.image && hoverImageUrl != null && (
+			<img
+				id="coordImage"
+				src={originalImageUrl}
+				onmouseover="this.src=this.getAttribute('data-hover-src')"
+				onmouseout="this.src=this.getAttribute('data-original-src')"
+				alt={coordInfo.name}
+				class={"aspect-square object-cover " + additionalImgStyles}
+				data-hover-src={hoverImageUrl}
+				data-original-src={originalImageUrl}
+			/>
+		)
+	}
 
 	<div class="px-3 flex flex-col">
 		<p class="text-sm pt-3 pb-1">{titles.join(" · ")}</p>
@@ -73,4 +89,4 @@ const iconSizeStyle = isHorizontal ? "w-6" : "w-1/12";
 		</div>
 		<p class="text-sm">{coordInfo.bio}</p>
 	</div>
-</div>
+</div>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -42,6 +42,7 @@ const coordinators = defineCollection({
 			isActive: z.boolean(),
 			grade: z.string(),
 			image: z.string(),
+      hover_image: z.optional(z.string()),
 			study: z.optional(z.string()),
 			personalLink: z.optional(z.string()),
 			github: z.optional(z.string()),

diff --git a/src/content/coordinators/pranav-dronavalli.json b/src/content/coordinators/pranav-dronavalli.json
@@ -6,6 +6,7 @@
   "github": "dronavallipranav",
   "personalLink": "https://www.dronavalli.dev/",
   "linkedIn": "pranavdronavalli",
-  "image": "pranav-dronavalli.jpg",
+  "image": "pranav-dronavalli-sad.jpg",
+  "hover_image": "pranav-dronavalli-happy.jpg",
   "bio": "I like insects, not bugs"
 }