feat(Pager): Add previous / next key icons

0u73r-h34v3n · Jan 6, 2025 · 687721b · 687721b
1 parent 2323aa0
commit 687721b
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/src/components/Pager.tsx b/src/components/Pager.tsx
@@ -7,37 +7,55 @@ 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={{
 					minWidth: "0px",
 					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>
 	);
 };