60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './actionCard.styles';
|
|
import { ActionCardProps } from './actionCard.props';
|
|
|
|
export const ActionCard: React.FC<ActionCardProps> = ({
|
|
title,
|
|
icon,
|
|
count,
|
|
onAddPress,
|
|
onViewAllPress,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
{/* Header with Icon and Title */}
|
|
<View style={styles.header}>
|
|
<View style={styles.leftSection}>
|
|
<View style={styles.iconContainer}>
|
|
<Icon name={icon} size={22} color={colors.icon} />
|
|
</View>
|
|
<View style={styles.titleSection}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
{count !== undefined && (
|
|
<Text style={styles.count}>
|
|
{count} {count === 1 ? 'item' : 'items'}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Action Buttons */}
|
|
<View style={styles.actionsRow}>
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.addButton]}
|
|
onPress={onAddPress}
|
|
activeOpacity={0.7}>
|
|
<Icon name="add-circle-outline" size={18} color="#FFFFFF" />
|
|
<Text style={[styles.actionButtonText, styles.addButtonText]}>
|
|
Add
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.actionButton}
|
|
onPress={onViewAllPress}
|
|
activeOpacity={0.7}>
|
|
<Icon name="eye-outline" size={18} color={colors.icon} />
|
|
<Text style={styles.actionButtonText}>View All</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|