135 lines
3.2 KiB
TypeScript
135 lines
3.2 KiB
TypeScript
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
|
|
import { Ionicons } from '@expo/vector-icons'
|
|
import { Badge } from '@/components/ui/Badge'
|
|
import { NEWS_KATEGORIE_LABELS } from '@innungsapp/shared/types'
|
|
import { format } from 'date-fns'
|
|
import { de } from 'date-fns/locale'
|
|
import { useNewsReadStore } from '@/store/news.store'
|
|
|
|
interface NewsCardProps {
|
|
news: {
|
|
id: string
|
|
title: string
|
|
kategorie: string
|
|
publishedAt: Date | null
|
|
isRead: boolean
|
|
author: { name: string } | null
|
|
}
|
|
onPress: () => void
|
|
}
|
|
|
|
export function NewsCard({ news, onPress }: NewsCardProps) {
|
|
const localReadIds = useNewsReadStore((s) => s.readIds)
|
|
const isRead = news.isRead || localReadIds.has(news.id)
|
|
|
|
return (
|
|
<TouchableOpacity onPress={onPress} style={styles.card} activeOpacity={0.84}>
|
|
<View style={styles.content}>
|
|
<View style={styles.topRow}>
|
|
<View style={styles.badgeRow}>
|
|
<Badge label={NEWS_KATEGORIE_LABELS[news.kategorie]} kategorie={news.kategorie} />
|
|
{!isRead && (
|
|
<View style={styles.newBadge}>
|
|
<Text style={styles.newBadgeText}>Neu</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text style={styles.dateText}>
|
|
{news.publishedAt
|
|
? format(new Date(news.publishedAt), 'dd. MMM', { locale: de })
|
|
: 'Entwurf'}
|
|
</Text>
|
|
</View>
|
|
<Text style={isRead ? styles.titleRead : styles.titleUnread} numberOfLines={2}>
|
|
{news.title}
|
|
</Text>
|
|
|
|
<View style={styles.metaRow}>
|
|
<View style={styles.dot} />
|
|
<Text style={styles.authorText}>{news.author?.name ?? 'Innung'}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Ionicons name="chevron-forward" size={16} color="#94A3B8" />
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: '#FFFFFF',
|
|
borderWidth: 1,
|
|
borderColor: '#E2E8F0',
|
|
borderRadius: 16,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 14,
|
|
shadowColor: '#0F172A',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
position: 'relative',
|
|
},
|
|
badgeRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
},
|
|
newBadge: {
|
|
borderRadius: 999,
|
|
backgroundColor: '#EF4444',
|
|
paddingHorizontal: 7,
|
|
paddingVertical: 2,
|
|
},
|
|
newBadgeText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
fontWeight: '700',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
marginRight: 10,
|
|
},
|
|
topRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 8,
|
|
},
|
|
dateText: {
|
|
fontSize: 11,
|
|
color: '#94A3B8',
|
|
fontWeight: '600',
|
|
},
|
|
titleUnread: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: '#0F172A',
|
|
lineHeight: 21,
|
|
marginBottom: 8,
|
|
},
|
|
titleRead: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: '#475569',
|
|
lineHeight: 20,
|
|
marginBottom: 8,
|
|
},
|
|
metaRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
},
|
|
dot: {
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
backgroundColor: '#CBD5E1',
|
|
},
|
|
authorText: {
|
|
fontSize: 11,
|
|
color: '#64748B',
|
|
},
|
|
})
|