From 64ac52232c349e00d9e06c4a173ebff4006d79a1 Mon Sep 17 00:00:00 2001
From: Michael Rooplall <MichaelRooplall@gmail.com>
Date: Fri, 13 Dec 2024 02:50:06 -0500
Subject: [PATCH] Add thumbnail images to the Robots page

---
 app/Robots/[robot]/MediaContainer.js   |   1 -
 app/Robots/[robot]/page.js             | 157 ++++++++++++++++---------
 app/Robots/[robot]/page.module.css     |  16 ++-
 app/components/RobotItem/RobotItem.jsx |  40 +++++--
 4 files changed, 144 insertions(+), 70 deletions(-)

diff --git a/app/Robots/[robot]/MediaContainer.js b/app/Robots/[robot]/MediaContainer.js
index ce9954f..dbb919b 100644
--- a/app/Robots/[robot]/MediaContainer.js
+++ b/app/Robots/[robot]/MediaContainer.js
@@ -16,7 +16,6 @@ const MediaContainer = ({robotItem}) => {
             dynamicHeight={false}
             preventMovementUntilSwipeScrollTolerance={true}
             swipeScrollTolerance={50}
-            showThumbs={true}
             style={{
                 position: 'relative',
                 display: 'flex',
diff --git a/app/Robots/[robot]/page.js b/app/Robots/[robot]/page.js
index 81b8207..4a2fadc 100644
--- a/app/Robots/[robot]/page.js
+++ b/app/Robots/[robot]/page.js
@@ -1,6 +1,7 @@
 "use client"
 import styles from './page.module.css'
 import { useState, useEffect } from 'react'
+import Image from 'next/image';
 
 import Navbar from '@components/Navbar/Navbar'
 import Footer from '@components/Footer/Footer'
@@ -44,6 +45,66 @@ const EventItem = ({eventData}) => {
 	)
 }
 
+const RobotNavigationButtons = ({visible, previousRobotItem, nextRobotItem}) => {
+	return (		
+		<div
+			className={styles.navigationButtons}
+			visible={visible}
+			style={{marginTop : visible == 'mobile' ? 40 : 0}}
+		>
+			<ButtonLink
+				className={styles.button}
+				href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
+				style={{
+					backgroundColor : '#000'
+				}}
+				disabled={previousRobotItem == null}
+			>
+				<span
+					style={{
+						paddingLeft : 20,
+						paddingRight : 20,
+						verticalAlign : 'bottom',
+						whiteSpace : 'nowrap'
+					}}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
+						<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+						<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
+					</svg>
+					<span>
+						Previous Robot
+					</span>
+				</span>
+			</ButtonLink>
+			<ButtonLink
+				className={styles.button}
+				href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
+				style={{
+					backgroundColor : '#000'
+				}}
+				disabled={nextRobotItem == null}
+			>
+				<span
+					style={{
+						paddingLeft : 20,
+						paddingRight : 20,
+						verticalAlign : 'bottom',
+						whiteSpace : 'nowrap',
+					}}
+				>
+					<span>
+						Next Robot
+					</span>
+					<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
+						<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+						<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
+					</svg>
+				</span>
+			</ButtonLink>
+		</div>
+	)
+}
 
 export default function Robot({params}) {
 
@@ -67,9 +128,40 @@ export default function Robot({params}) {
 	}, [])
 
 	if (robotData == null){
-		return <span>
-			Loading
-		</span>
+		return (
+			<div
+				style={{
+					display : 'flex',
+					width : '100dvw',
+					height : '80dvh',
+					justifyContent : 'center',
+					alignItems : 'center'
+				}}
+			>
+				<div
+					style={{
+						display : 'flex',
+						flexDirection : 'column',
+						gap : 20,
+						justifyContent : 'center',
+						alignItems : 'center'
+					}}
+				>
+					<Image
+						src="/images/logo.png"
+						width={128}
+						height={128}
+						alt="The Sentinels Logo"
+						style={{
+							backgroundColor : '#0054b1'
+						}}
+					/>
+					<span>
+						Loading
+					</span>
+				</div>
+			</div>
+		)
 	}
 
 	const {robotItem, previousRobotItem, nextRobotItem} = (() => {
@@ -89,7 +181,8 @@ export default function Robot({params}) {
 			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify'}}>
 				<div
 					style={{
-						display : 'flex'
+						display : 'flex',
+						justifyContent : 'space-between'
 					}}
 				>
 					<ButtonLink
@@ -118,6 +211,7 @@ export default function Robot({params}) {
 							</span>
 						</span>
 					</ButtonLink>
+					<RobotNavigationButtons visible='desktop' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
 				</div>
 				
 				<h3>{robotItem.name}</h3>
@@ -190,60 +284,7 @@ export default function Robot({params}) {
 						</div>
 					</div>
 				</div>
-				<div
-					className={styles.navigationButtons}
-				>
-					<ButtonLink
-						className={styles.button}
-						href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
-						style={{
-							backgroundColor : '#000'
-						}}
-						disabled={previousRobotItem == null}
-					>
-						<span
-							style={{
-								paddingLeft : 20,
-								paddingRight : 20,
-								verticalAlign : 'bottom',
-								whiteSpace : 'nowrap'
-							}}
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
-								<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-								<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
-							</svg>
-							<span>
-								Previous Robot
-							</span>
-						</span>
-					</ButtonLink>
-					<ButtonLink
-						className={styles.button}
-						href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
-						style={{
-							backgroundColor : '#000'
-						}}
-						disabled={nextRobotItem == null}
-					>
-						<span
-							style={{
-								paddingLeft : 20,
-								paddingRight : 20,
-								verticalAlign : 'bottom',
-								whiteSpace : 'nowrap',
-							}}
-						>
-							<span>
-								Next Robot
-							</span>
-							<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
-								<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-								<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
-							</svg>
-						</span>
-					</ButtonLink>
-				</div>
+				<RobotNavigationButtons visible='mobile' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
 			</div>
 			<SponsorshipIncentivesBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
 			<Footer/>
diff --git a/app/Robots/[robot]/page.module.css b/app/Robots/[robot]/page.module.css
index 04fdef7..10df9cb 100644
--- a/app/Robots/[robot]/page.module.css
+++ b/app/Robots/[robot]/page.module.css
@@ -14,12 +14,16 @@
 
 .navigationButtons {
     display: flex;
-    margin-top: 80px;
     flex-direction: row;
     justify-content: flex-end;
     gap : 20px;
 }
 
+.navigationButtons[visible='mobile'] {
+    display: 'none';
+    visibility: hidden;
+}
+
 .sideDataContainer {
     width : 320px;
     display: flex;
@@ -63,4 +67,14 @@
         flex-direction: column;
     }
     
+    .navigationButtons[visible='desktop'] {
+        display: 'none';
+        visibility: hidden;
+    }
+
+    .navigationButtons[visible='mobile'] {
+        display: 'initial';
+        visibility: visible;
+    }
+    
 }
diff --git a/app/components/RobotItem/RobotItem.jsx b/app/components/RobotItem/RobotItem.jsx
index 8adc474..bde6b40 100644
--- a/app/components/RobotItem/RobotItem.jsx
+++ b/app/components/RobotItem/RobotItem.jsx
@@ -11,6 +11,10 @@ const RobotItem = ({robotItem, index}) => {
 
 	const [isHovering, setHovering] = useState(false);
 
+	console.log("thumb", robotItem.thumbnail)
+
+	const thumbnail = (robotItem.thumbnail) ? `url(${robotItem.thumbnail})` : "url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)"
+
 	return (
 		<Link
 			href={`/Robots/${robotItem.name.replace(/ /g, "")}`}
@@ -20,7 +24,7 @@ const RobotItem = ({robotItem, index}) => {
 				backgroundColor : 'red',
 				aspectRatio : '1 / 1',
 				position : 'relative',
-                transform: `scale(${isHovering ? 1.05 : 1})`,
+        transform: `scale(${isHovering ? 1.05 : 1})`,
 			}}
 			onMouseEnter={() => {
 				setHovering(true);
@@ -37,11 +41,12 @@ const RobotItem = ({robotItem, index}) => {
 					bottom : 8,
 					left : -8,
 					right : 8,
-					backgroundColor : bgColor,
+					backgroundColor : isHovering ? bgColor : 'transparent',
 					backgroundSize: 'cover',
 					backgroundRepeat: 'no-repeat',
-    				backgroundBlendMode: 'multiply',
-					backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)'
+					backgroundPosition : 'center center',
+    			backgroundBlendMode: 'multiply',
+					backgroundImage : thumbnail
 				}}
 			>
 			</div>
@@ -51,13 +56,27 @@ const RobotItem = ({robotItem, index}) => {
 					position: 'relative',
 					width : '100%',
 					height : '100%',
-					backgroundColor : isHovering ? bgColor : 'transparent',
-					backgroundSize: 'cover',
-					backgroundRepeat: 'no-repeat',
-    				backgroundBlendMode: 'multiply',
-					backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)',
+					overflow : 'hidden',
+					display : 'flex',
+					justifyContent: 'center',
+					alignItems : 'center'
 				}}
 			>
+				<div
+					className={styles.robotItemImageBox}
+					style={{
+						position: 'relative',
+						width : isHovering ? '105%' : '100%',
+						height : isHovering ? '105%' : '100%',
+						backgroundColor : isHovering ? bgColor : 'transparent',
+						backgroundSize: 'cover',
+						backgroundRepeat: 'no-repeat',
+						backgroundPosition : 'center center',
+						backgroundBlendMode: 'multiply',
+						backgroundImage : thumbnail,
+						transition : 'width 0.4s, height 0.4s'
+					}}
+				/>
 			</div>
 			<div
 				style={{
@@ -65,7 +84,8 @@ const RobotItem = ({robotItem, index}) => {
 					flexDirection : 'column',
 					padding : 20,
 					position : 'absolute',
-					left : 0, right : 0,
+					left : 0,
+					right : 0,
 					bottom : 0,
 					background : 'linear-gradient(transparent, #000000ee)',
 					color : '#fff'