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

feat: disable carousel buttons when at start/end

Browse source
This commit is contained in:
trafficlunar 2025-04-14 18:53:50 +01:00
parent a00d375ca3
commit 22057d16fe
1 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
"use client"; "use client";
import { useCallback, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useEmblaCarousel from "embla-carousel-react"; import useEmblaCarousel from "embla-carousel-react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
@ -22,10 +22,6 @@ export default function Carousel({ images, className }: Props) {
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap())); emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [emblaApi]); }, [emblaApi]);
const scrollTo = useCallback((index: number) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
return ( return (
<div className="relative w-full h-fit"> <div className="relative w-full h-fit">
<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}>
@ -40,10 +36,22 @@ export default function Carousel({ images, className }: Props) {
{images.length > 1 && ( {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"> <button
onClick={() => emblaApi?.scrollPrev()}
disabled={!emblaApi?.canScrollPrev()}
className={`absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
emblaApi?.canScrollPrev() ? "opacity-100 cursor-pointer" : "opacity-50"
}`}
>
<Icon icon="ic:round-chevron-left" /> <Icon icon="ic:round-chevron-left" />
</button> </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"> <button
onClick={() => emblaApi?.scrollNext()}
disabled={!emblaApi?.canScrollNext()}
className={`absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
emblaApi?.canScrollNext() ? "opacity-100 cursor-pointer" : "opacity-50"
}`}
>
<Icon icon="ic:round-chevron-right" /> <Icon icon="ic:round-chevron-right" />
</button> </button>
@ -51,8 +59,8 @@ export default function Carousel({ images, className }: Props) {
{scrollSnaps.map((_, index) => ( {scrollSnaps.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => scrollTo(index)} onClick={() => emblaApi?.scrollTo(index)}
className={`size-1.5 rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`} className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/> />
))} ))}
</div> </div>