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

fix: don't show carousel buttons when only one image is present and image dimensions

Browse source
This commit is contained in:
trafficlunar 2025-04-01 21:37:01 +01:00
parent fb399734c0
commit 68eed4e5fd
1 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/components/carousel.tsx
View file

@ -30,28 +30,32 @@ export default function Carousel({ images, className }: Props) {
<div className="flex">
{images.map((src, index) => (
<div key={index} className="flex-[0_0_100%]">
<img src={src} alt="" className="w-full h-auto" />
<img src={src} alt="" className="w-full h-auto aspect-[3/2] object-contain" />
</div>
))}
</div>
</div>
<button onClick={scrollPrev} className="absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-left" />
</button>
<button onClick={scrollNext} className="absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-right" />
</button>
{images.length > 1 && (
<>
<button onClick={scrollPrev} className="absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-left" />
</button>
<button onClick={scrollNext} className="absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-right" />
</button>
<div className="flex justify-center gap-2 absolute left-1/2 -translate-x-1/2 bottom-2">
{scrollSnaps.map((_, index) => (
<button
key={index}
onClick={() => scrollTo(index)}
className={`size-1.5 rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/>
))}
</div>
<div className="flex justify-center gap-2 absolute left-1/2 -translate-x-1/2 bottom-2">
{scrollSnaps.map((_, index) => (
<button
key={index}
onClick={() => scrollTo(index)}
className={`size-1.5 rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/>
))}
</div>
</>
)}
</div>
);
}