Spence Pope
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import {StyleSheet, View} from 'react-native'
|
|
import {BlurView} from 'expo-blur'
|
|
|
|
type Props = {
|
|
count: number
|
|
activeIndex: number
|
|
}
|
|
|
|
const ACTIVE = 6
|
|
const INACTIVE = 4
|
|
const GAP = 5
|
|
|
|
export function PagerDots({count, activeIndex}: Props) {
|
|
if (count <= 1) return null
|
|
return (
|
|
<View style={styles.root}>
|
|
<BlurView intensity={20} tint="dark" style={styles.inner}>
|
|
{Array.from({length: count}).map((_, i) => {
|
|
const isActive = i === activeIndex
|
|
return (
|
|
<View
|
|
key={i}
|
|
style={[
|
|
isActive ? styles.active : styles.inactive,
|
|
isActive ? styles.activeDot : styles.inactiveDot,
|
|
]}
|
|
/>
|
|
)
|
|
})}
|
|
</BlurView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: {
|
|
borderRadius: 999,
|
|
overflow: 'hidden',
|
|
},
|
|
inner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: GAP,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 6,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
activeDot: {
|
|
width: ACTIVE,
|
|
height: ACTIVE,
|
|
borderRadius: ACTIVE / 2,
|
|
},
|
|
inactiveDot: {
|
|
width: INACTIVE,
|
|
height: INACTIVE,
|
|
borderRadius: INACTIVE / 2,
|
|
},
|
|
active: {
|
|
backgroundColor: '#fff',
|
|
},
|
|
inactive: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.4)',
|
|
},
|
|
})
|