79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
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.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' }
|
|
})
|