| 1 | "use client"; |
| 2 | |
| 3 | import { cn } from "@/lib/utils"; |
| 4 | import { usePresentationState } from "@/states/presentation-state"; |
| 5 | |
| 6 | interface PresentModeProgressBarProps { |
| 7 | slideIds: string[]; |
| 8 | } |
| 9 | |
| 10 | export function PresentModeProgressBar({ |
| 11 | slideIds, |
| 12 | }: PresentModeProgressBarProps) { |
| 13 | const currentSlideId = usePresentationState((s) => s.currentSlideId); |
| 14 | const setCurrentSlideId = usePresentationState((s) => s.setCurrentSlideId); |
| 15 | |
| 16 | if (slideIds.length === 0) return null; |
| 17 | |
| 18 | return ( |
| 19 | <div className="fixed right-1 bottom-0.5 left-1 z-1001 m-0!"> |
| 20 | <div className="flex h-1.5 w-full gap-1"> |
| 21 | {slideIds.map((slideId, index) => ( |
| 22 | <button |
| 23 | type="button" |
| 24 | key={slideId} |
| 25 | className={cn( |
| 26 | "h-full flex-1 rounded-full transition-all", |
| 27 | slideId === currentSlideId |
| 28 | ? "bg-primary shadow-xs" |
| 29 | : "bg-white/20 hover:bg-white/40", |
| 30 | )} |
| 31 | onClick={() => setCurrentSlideId(slideId)} |
| 32 | aria-label={`Go to slide ${index + 1}`} |
| 33 | /> |
| 34 | ))} |
| 35 | </div> |
| 36 | </div> |
| 37 | ); |
| 38 | } |
| 39 |