From fe74692e20760c62e5d1f0b2b1f8cde0f9731edf Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Tue, 18 Jun 2024 13:38:20 +0700
Subject: [PATCH] feat(component): skeleton render

---
 src/components/renderSkeleton.js | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/renderSkeleton.js

diff --git a/src/components/renderSkeleton.js b/src/components/renderSkeleton.js
new file mode 100644
index 0000000..ef79dbe
--- /dev/null
+++ b/src/components/renderSkeleton.js
@@ -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;