From a37bde9d6c1f7bdd427e6b60e6c31dfeca7100d6 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 26 Jul 2025 23:04:32 +0100
Subject: [PATCH] style: pixelate qr-code images in image-viewer component

---
 src/components/image-viewer.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/image-viewer.tsx b/src/components/image-viewer.tsx
index ba1297a..ce2c365 100644
--- a/src/components/image-viewer.tsx
+++ b/src/components/image-viewer.tsx
@@ -72,7 +72,8 @@ export default function ImageViewer({ src, alt, width, height, className, images
 
 	return (
 		<>
-			<Image src={src} alt={alt} width={width} height={height} className={`cursor-pointer ${className}`} onClick={() => setIsOpen(true)} />
+			{/* not inserting pixelated image-rendering here because i thought it looked a bit weird */}
+			<Image src={src} alt={alt} width={width} height={height} onClick={() => setIsOpen(true)} className={`cursor-pointer ${className}`} />
 
 			{isOpen &&
 				createPortal(
@@ -99,7 +100,14 @@ export default function ImageViewer({ src, alt, width, height, className, images
 								<div className="flex h-full items-center">
 									{imagesMap.map((image, index) => (
 										<div key={index} className="flex-shrink-0 w-full">
-											<Image src={image} alt={alt} width={576} height={576} className="object-contain" />
+											<Image
+												src={image}
+												alt={alt}
+												width={576}
+												height={576}
+												className="object-contain"
+												style={{ imageRendering: image.includes("qr-code") ? "pixelated" : "auto" }}
+											/>
 										</div>
 									))}
 								</div>