changing post display on profile to a more compact display that eventually you will be able to click into for more details - I think i will do the same on the posts page and have the admins enter information about why the post was approved or denied

app/components/CompactPostComponent.tsx

@@ -0,0 +1,73 @@
+import { useUser } from '@clerk/clerk-react'
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Post, StatusEnum } from '../models/postModel'
+
+export const CompactPostComponent: React.FC<Post> = (post) => {
+    const { user } = useUser()
+    console.log()
+    console.log()
+
+    return (
+        <TouchableOpacity key={post._id} style={styles.posts}>
+            <View style={styles.header}>
+                <Text style={[styles.text, styles.date]}>{post.notes}</Text>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    {post.status === StatusEnum.Created && (
+                        <Text style={[styles.created, styles.statusTag]}>Created</Text>
+                    )}
+                    {post.status === StatusEnum.Pending && (
+                        <Text style={[styles.pending, styles.statusTag]}>Pending</Text>
+                    )}
+                    {post.status === StatusEnum.Denied && <Text style={[styles.denied, styles.statusTag]}>Denied</Text>}
+                    {post.status === StatusEnum.Approved && (
+                        <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
+                    )}
+                </View>
+            </View>
+            <View style={styles.footer}>
+                <Text style={styles.subtext}>{post.address}</Text>
+                <Text style={[styles.subtext]}>{new Date(post.date).toLocaleDateString()}</Text>
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    text: {
+        color: '#fff',
+        justifyContent: 'center'
+    },
+    subtext: {
+        color: '#b9b9b9ff',
+        justifyContent: 'center'
+    },
+    posts: {
+        marginTop: 10,
+        backgroundColor: '#373d44ff',
+        borderColor: '#626e7aff',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 12,
+        padding: 10,
+        width: '100%'
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 16
+    },
+    footer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    date: {
+        paddingVertical: 3,
+        borderRadius: 6,
+        color: '#ffffff',
+        fontSize: 16
+    },
+    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
+    created: { backgroundColor: '#0d6efd', color: '#ffffff' },
+    pending: { backgroundColor: '#ffc107', color: '#000000' },
+    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
+    approved: { backgroundColor: '#198754', color: '#ffffff' }
+})