change profile tab to be stack nav like posts as well as changing created to open in postmodel

app/(tabs)/profile/index.tsx

@@ -0,0 +1,111 @@
+import { useUser } from '@clerk/clerk-react'
+import { useFocusEffect } from 'expo-router'
+import React, { useState } from 'react'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { CompactPostComponent } from '../../components/CompactPostComponent'
+import { SignOutButton } from '../../components/SignOutButton'
+import { Post } from '../../models/postModel'
+
+export default function PostsScreen() {
+    const { user } = useUser()
+    const [posts, setPosts] = useState<Post[]>()
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            // TODO: add endpoint to get only non approved or denied status posts
+            fetchData()
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+            }
+        }, [])
+    )
+
+    async function fetchData() {
+        fetch(`http://localhost:3000/api/v1/posts/user/${user?.id}`)
+            .then((res) => res.json())
+            .then((json) => {
+                console.log(json)
+                setPosts(json.data)
+            })
+    }
+
+    return (
+        <>
+            <View style={styles.wrapper}>
+                <View style={styles.profileInfoCard}>
+                    <View style={styles.profilePic}>
+                        <Image source={{ uri: user?.imageUrl }} style={styles.image}></Image>
+                    </View>
+                    <View style={styles.nameContainer}>
+                        <Text style={styles.text}>
+                            {user?.firstName} {user?.lastName}
+                        </Text>
+                        <Text style={styles.text}>{user?.emailAddresses[0].emailAddress}</Text>
+                    </View>
+                    <View style={styles.buttonLayout}>
+                        <SignOutButton></SignOutButton>
+                    </View>
+                </View>
+                <View style={styles.userPostsCard}>
+                    {posts?.length ? (
+                        posts.map((el) => <CompactPostComponent key={el._id} {...el} />)
+                    ) : (
+                        <View style={styles.noPostsContainer}>
+                            <Text style={styles.noPosts}>Your posts will show up here!</Text>
+                        </View>
+                    )}
+                </View>
+            </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 16,
+        overflow: 'scroll'
+    },
+    profileInfoCard: {
+        backgroundColor: '#373d44ff',
+        marginTop: 12,
+        borderColor: '#626e7aff',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderRadius: 12
+    },
+    profilePic: {
+        marginTop: 12,
+        display: 'flex',
+        alignItems: 'center'
+    },
+    image: {
+        height: 75,
+        width: 75,
+        borderRadius: 37.5
+    },
+    nameContainer: { display: 'flex', alignItems: 'center' },
+    text: {
+        color: 'white',
+        fontSize: 16,
+        marginTop: 6
+    },
+    buttonLayout: {
+        alignItems: 'center',
+        marginVertical: 12
+    },
+    userPostsCard: {
+        flex: 1
+    },
+    noPostsContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    noPosts: {
+        color: '#787b80ff'
+    }
+})