From 687721b2d554639cebfe88d0e280bcb16ebfa64b Mon Sep 17 00:00:00 2001
From: ynhhoJ <22500212+ynhhoJ@users.noreply.github.com>
Date: Mon, 6 Jan 2025 14:55:42 +0200
Subject: [PATCH] feat(Pager): Add previous / next key icons

---
 src/components/Pager.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/Pager.tsx b/src/components/Pager.tsx
index 7527194..ef80173 100644
--- a/src/components/Pager.tsx
+++ b/src/components/Pager.tsx
@@ -7,25 +7,35 @@ export const Pager: React.FC<{
 	onPrev: () => void;
 	hasNext: boolean;
 	hasPrev: boolean;
-}> = (props) => {
+	prevKey?: "l2";
+	nextKey?: "r2";
+}> = ({ currentText, prevKey, hasNext, hasPrev, onNext, onPrev, nextKey }) => {
 	return (
 		<Focusable
 			style={{ ...pager_container, ...focus_panel_no_padding }}
 			flow-children="horizontal"
 		>
+			{prevKey && (
+				<img
+					src={`/steaminputglyphs/sd_${prevKey}.svg`}
+					alt={prevKey}
+					style={{ opacity: hasPrev ? 1 : 0.5 }}
+				/>
+			)}
+
 			<DialogButton
 				style={{
 					minWidth: "0px",
 					padding: "10px 10px",
 					width: "35px",
 				}}
-				disabled={!props.hasPrev}
-				onClick={props.onPrev}
+				disabled={!hasPrev}
+				onClick={onPrev}
 			>
 				&lt;
 			</DialogButton>
 
-			<div className="title">{props.currentText}</div>
+			<div className="title">{currentText}</div>
 
 			<DialogButton
 				style={{
@@ -33,11 +43,19 @@ export const Pager: React.FC<{
 					padding: "10px 10px",
 					width: "35px",
 				}}
-				disabled={!props.hasNext}
-				onClick={props.onNext}
+				disabled={!hasNext}
+				onClick={onNext}
 			>
 				&gt;
 			</DialogButton>
+
+			{nextKey && (
+				<img
+					src={`/steaminputglyphs/sd_${nextKey}.svg`}
+					alt={nextKey}
+					style={{ opacity: hasNext ? 1 : 0.5 }}
+				/>
+			)}
 		</Focusable>
 	);
 };