feat(DeviceDetailOverlay): add swipe indicator dots for device navigation
This commit is contained in:
parent
e5c2a7fca5
commit
c3af4406bf
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user