trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: pixelate qr-code images in image-viewer component

Browse source
This commit is contained in:
trafficlunar 2025-07-26 23:04:32 +01:00
parent 78320fdd56
commit a37bde9d6c
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/image-viewer.tsx
View file

@ -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>