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' }
+})

app/components/PostComponent.tsx

@@ -10,6 +10,7 @@ type PostComponentProps = {
 
 export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData }) => {
     const { user } = useUser()
+    const isProfileView = window.location.href.includes('/profile')
 
     async function approvePost(postID: string) {
         console.log('Approving post ' + postID)
@@ -54,7 +55,7 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                 />
             </View>
             <Text style={{ color: '#fff' }}>{post.notes}</Text>
-            {user?.publicMetadata.role !== 'admin' && (
+            {isProfileView ? (
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                     {post.status === StatusEnum.Created && (
                         <Text style={[styles.created, styles.statusTag]}>Created</Text>
@@ -67,8 +68,8 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                         <Text style={[styles.approved, styles.statusTag]}>Approved</Text>
                     )}
                 </View>
-            )}
-            {user?.publicMetadata.role === 'admin' && (
+            ) : null}
+            {!isProfileView ? (
                 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
                     <TouchableOpacity style={{ flex: 1, marginRight: 5 }} onPress={() => denyPost(post._id)}>
                         <Text
@@ -97,7 +98,7 @@ export const PostComponent: React.FC<PostComponentProps> = ({ post, fetchData })
                         </Text>
                     </TouchableOpacity>
                 </View>
-            )}
+            ) : null}
         </View>
     )
 }