tattletires/app/components/CompactPostComponent.tsx

import { router } from 'expo-router'
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) => {
    return (
        <TouchableOpacity
            key={post._id}
            style={styles.posts}
            onPress={() => {
                router.push({
                    pathname: '/posts/details',
                    params: {
                        id: post._id
                    }
                })
            }}
        >
            <View style={styles.header}>
                <Text style={[styles.text, styles.title]}>{post.notes}</Text>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    {post.status === StatusEnum.Created && <Text style={[styles.open, styles.statusTag]}>Open</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, styles.address]}>{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' },
    title: {
        paddingVertical: 3,
        borderRadius: 6,
        color: '#ffffff',
        fontSize: 16,
        paddingRight: 10
    },
    address: {
        paddingRight: 15
    },
    statusTag: { paddingVertical: 3, paddingHorizontal: 10, borderRadius: 6, fontSize: 16 },
    open: { backgroundColor: '#0d6efd', color: '#ffffff' },
    pending: { backgroundColor: '#ffc107', color: '#000000' },
    denied: { backgroundColor: '#dc3545', color: '#ffffff' },
    approved: { backgroundColor: '#198754', color: '#ffffff' }
})