farhantock
6 months ago
1 changed files with 51 additions and 0 deletions
@ -0,0 +1,51 @@
|
||||
import React from 'react'; |
||||
import { View, StyleSheet } from 'react-native'; |
||||
import { Card } from 'react-native-paper'; |
||||
import SkeletonPlaceholder from 'react-native-skeleton-placeholder'; |
||||
|
||||
const renderSkeletonPresence = (length) => { |
||||
return Array.from({ length }).map((_, index) => ( |
||||
<Card key={index} style={styles.cardPrecense}> |
||||
<Card.Content> |
||||
<SkeletonPlaceholder> |
||||
<View style={[styles.row, { justifyContent: 'space-between' }]}> |
||||
<View style={[styles.row, styles.presenceDate, { width: 150, height: 20, borderRadius: 5 }]} /> |
||||
<View style={[styles.presenceDate, { backgroundColor: '#E0E0E0', width: 80, height: 20, borderRadius: 5 }]} /> |
||||
</View> |
||||
<View style={[styles.row, { justifyContent: 'space-between' }]}> |
||||
<View style={[styles.row, { width: 150, height: 20 }]}> |
||||
<View style={{ width: 20, height: 20, borderRadius: 5 }} /> |
||||
<View style={{ width: 100, height: 20, marginLeft: 5, borderRadius: 5 }} /> |
||||
</View> |
||||
<View style={[styles.row, { width: 150, height: 20 }]}> |
||||
<View style={{ width: 40, height: 20, borderRadius: 5 }} /> |
||||
<View style={{ width: 40, height: 20, marginLeft: 5, borderRadius: 5 }} /> |
||||
<View style={{ width: 40, height: 20, marginLeft: 5, borderRadius: 5 }} /> |
||||
</View> |
||||
</View> |
||||
<View style={[styles.row, { justifyContent: 'space-between' }]}> |
||||
<View style={{ width: 150, height: 20, borderRadius: 5 }} /> |
||||
<View style={{ width: 150, height: 20, marginLeft: 5, borderRadius: 5 }} /> |
||||
</View> |
||||
</SkeletonPlaceholder> |
||||
</Card.Content> |
||||
</Card> |
||||
)); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
row: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
}, |
||||
cardPrecense: { |
||||
margin: 10, |
||||
padding: 10, |
||||
}, |
||||
presenceDate: { |
||||
padding: 5, |
||||
borderRadius: 5, |
||||
}, |
||||
}); |
||||
|
||||
export default renderSkeletonPresence; |
Loading…
Reference in new issue