From e52ea53d798585fbb8f2bd87e2f46fe6d5aeeaaa Mon Sep 17 00:00:00 2001
From: vineyardbovines <spencerfpope@gmail.com>
Date: Tue, 21 Apr 2026 12:35:41 -0400
Subject: [PATCH] feat(lightbox): add PagerDots indicator

---
 src/features/lightbox/chrome/PagerDots.tsx | 45 ++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/features/lightbox/chrome/PagerDots.tsx

diff --git a/src/features/lightbox/chrome/PagerDots.tsx b/src/features/lightbox/chrome/PagerDots.tsx
new file mode 100644
index 0000000000..67c47fabef
--- /dev/null
+++ b/src/features/lightbox/chrome/PagerDots.tsx
@@ -0,0 +1,45 @@
+import {StyleSheet, View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+
+type Props = {
+  count: number
+  activeIndex: number
+}
+
+const DOT = 6
+const GAP = 4
+
+export function PagerDots({count, activeIndex}: Props) {
+  if (count <= 1) return null
+  return (
+    <View style={[a.flex_row, a.justify_center, a.align_center, styles.row]}>
+      {Array.from({length: count}).map((_, i) => (
+        <View
+          key={i}
+          style={[
+            styles.dot,
+            i === activeIndex ? styles.active : styles.inactive,
+          ]}
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    gap: GAP,
+  },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+  },
+  active: {
+    backgroundColor: '#fff',
+  },
+  inactive: {
+    backgroundColor: 'rgba(255, 255, 255, 0.4)',
+  },
+})