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

style: center images in image-viewer component

Browse source 
might make the actual dialog change height based on the image
This commit is contained in:
trafficlunar 2025-04-20 12:40:23 +01:00
parent febb83a164
commit b369d1f5c7
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/carousel.tsx
View file

@ -51,7 +51,7 @@ export default function Carousel({ images, className }: Props) {
<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className ?? ""}`} ref={emblaRef}> <div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className ?? ""}`} ref={emblaRef}>
<div className="flex"> <div className="flex">
{images.map((src, index) => ( {images.map((src, index) => (
<div key={index} className="flex-[0_0_100%]"> <div key={index} className="flex-shrink-0 w-full">
<ImageViewer src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" images={images} /> <ImageViewer src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" images={images} />
</div> </div>
))} ))}

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

@ -41,7 +41,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
useEffect(() => { useEffect(() => {
if (!emblaApi) return; if (!emblaApi) return;
// Keep order of images whilst opening on src // Keep order of images whilst opening at src prop
const index = images.indexOf(src); const index = images.indexOf(src);
if (index !== -1) { if (index !== -1) {
emblaApi.scrollTo(index); emblaApi.scrollTo(index);
@ -111,8 +111,8 @@ export default function ImageViewer({ src, alt, width, height, className, images
) : ( ) : (
<> <>
{images.map((image, index) => ( {images.map((image, index) => (
<div key={index} className="flex-[0_0_100%]"> <div key={index} className="flex-shrink-0 w-full">
<Image src={image} alt={alt} width={576} height={576} className="w-full" /> <Image src={image} alt={alt} width={576} height={576} className="w-full h-full object-contain" />
</div> </div>
))} ))}
</> </>