158 lines
4.0 KiB
TypeScript
158 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import { Card } from '../../../components';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import { AwarenessArticle } from '../types';
|
|
|
|
interface AwarenessCardProps {
|
|
article: AwarenessArticle;
|
|
isBookmarked: boolean;
|
|
onToggleBookmark: () => void;
|
|
onPress: () => void;
|
|
}
|
|
|
|
export const AwarenessCard = ({
|
|
article,
|
|
isBookmarked,
|
|
onToggleBookmark,
|
|
onPress,
|
|
}: AwarenessCardProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<Card style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={[styles.iconFrame, { backgroundColor: `${theme.colors.primary}12` }]}>
|
|
<Ionicons name={article.icon as any} size={22} color={theme.colors.primary} />
|
|
</View>
|
|
<View style={styles.headerInfo}>
|
|
<View style={styles.titleRow}>
|
|
<Text style={[styles.category, { color: theme.colors.primary }]}>
|
|
{article.category}
|
|
</Text>
|
|
{article.isUrgent && (
|
|
<View style={[styles.urgentBadge, { backgroundColor: `${theme.colors.error}15` }]}>
|
|
<Text style={[styles.urgentText, { color: theme.colors.error }]}>URGENT</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Text style={[styles.title, { color: theme.colors.textPrimary }]} numberOfLines={1}>
|
|
{article.title}
|
|
</Text>
|
|
</View>
|
|
<Pressable hitSlop={10} onPress={onToggleBookmark} style={styles.bookmarkBtn}>
|
|
<Ionicons
|
|
name={isBookmarked ? 'bookmark' : 'bookmark-outline'}
|
|
size={22}
|
|
color={isBookmarked ? theme.colors.primary : theme.colors.textMuted}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<Text style={[styles.description, { color: theme.colors.textSecondary }]} numberOfLines={2}>
|
|
{article.description}
|
|
</Text>
|
|
|
|
<View style={styles.footer}>
|
|
<View style={styles.tags}>
|
|
{article.tags.slice(0, 2).map((tag) => (
|
|
<View key={tag} style={[styles.tag, { backgroundColor: theme.colors.surfaceMuted }]}>
|
|
<Text style={[styles.tagText, { color: theme.colors.textSecondary }]}>#{tag}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
<View style={styles.readMore}>
|
|
<Text style={[styles.readMoreText, { color: theme.colors.primary }]}>Read More</Text>
|
|
<Ionicons name="chevron-forward" size={14} color={theme.colors.primary} />
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
gap: 12,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
alignItems: 'center',
|
|
},
|
|
iconFrame: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerInfo: {
|
|
flex: 1,
|
|
gap: 2,
|
|
},
|
|
titleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
category: {
|
|
fontSize: 11,
|
|
fontFamily: fontFamily.bold,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
},
|
|
urgentBadge: {
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 4,
|
|
},
|
|
urgentText: {
|
|
fontSize: 9,
|
|
fontFamily: fontFamily.bold,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontFamily: fontFamily.bold,
|
|
},
|
|
bookmarkBtn: {
|
|
padding: 4,
|
|
},
|
|
description: {
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
},
|
|
footer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginTop: 4,
|
|
},
|
|
tags: {
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
tag: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 8,
|
|
},
|
|
tagText: {
|
|
fontSize: 10,
|
|
fontFamily: fontFamily.semibold,
|
|
},
|
|
readMore: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
},
|
|
readMoreText: {
|
|
fontSize: 13,
|
|
fontFamily: fontFamily.bold,
|
|
},
|
|
});
|