feat(DeviceDetailOverlay): add swipe indicator dots for device navigation

This commit is contained in:
Jaime Idolpx 2026-06-15 00:50:37 -04:00
parent e5c2a7fca5
commit c3af4406bf

View File

@ -455,6 +455,23 @@ export default function DeviceDetailOverlay({
))} ))}
</Swiper> </Swiper>
</div> </div>
{/* ── Swipe indicator dots ── */}
{devices.length > 1 && (
<div className="flex-shrink-0 flex items-center justify-center gap-2.5 py-2 border-t border-neutral-200/50">
{devices.map((_, i) => (
<button
key={i}
onClick={() => swiperRef.current?.slideTo(i)}
className={`rounded-full transition-all duration-200 ${
activeIndex === i
? 'w-4 h-2 bg-blue-500'
: 'w-2 h-2 bg-neutral-300 hover:bg-neutral-400'
}`}
/>
))}
</div>
)}
</motion.div> </motion.div>
</div> </div>
</AnimatePresence> </AnimatePresence>