85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import React from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
export default function PaginationLite({ currentPage, totalPages, onChange }: any) {
|
|
const canGoPrev = currentPage > 1;
|
|
const canGoNext = currentPage < totalPages;
|
|
|
|
return (
|
|
<View style={paginationStyles.container}>
|
|
<Pressable
|
|
disabled={!canGoPrev}
|
|
onPress={() => onChange(currentPage - 1)}
|
|
style={[paginationStyles.btn, !canGoPrev && paginationStyles.btnDisabled]}
|
|
>
|
|
<Ionicons name="chevron-back" size={20} color={canGoPrev ? '#6366F1' : '#D1D5DB'} />
|
|
</Pressable>
|
|
|
|
<View style={paginationStyles.indicator}>
|
|
<Text style={paginationStyles.currentPage}>{currentPage}</Text>
|
|
<Text style={paginationStyles.separator}>/</Text>
|
|
<Text style={paginationStyles.totalPages}>{totalPages}</Text>
|
|
</View>
|
|
|
|
<Pressable
|
|
disabled={!canGoNext}
|
|
onPress={() => onChange(currentPage + 1)}
|
|
style={[paginationStyles.btn, !canGoNext && paginationStyles.btnDisabled]}
|
|
>
|
|
<Ionicons name="chevron-forward" size={20} color={canGoNext ? '#6366F1' : '#D1D5DB'} />
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const paginationStyles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
paddingVertical: 20,
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#F0F2F8',
|
|
},
|
|
btn: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 12,
|
|
backgroundColor: '#F9FAFB',
|
|
borderWidth: 1,
|
|
borderColor: '#E5E7EB',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
btnDisabled: {
|
|
backgroundColor: '#F3F4F6',
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
indicator: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 10,
|
|
backgroundColor: '#EEF2FF',
|
|
borderRadius: 12,
|
|
},
|
|
currentPage: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: '#6366F1',
|
|
},
|
|
separator: {
|
|
fontSize: 16,
|
|
color: '#9CA3AF',
|
|
},
|
|
totalPages: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#6B7280',
|
|
},
|
|
});
|