56 lines
1.7 KiB
TypeScript
56 lines
1.7 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}>
|
|
<View style={styles.header}>
|
|
<View style={styles.leftSection}>
|
|
<View style={styles.iconContainer}>
|
|
<Icon name={icon} size={20} 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>
|
|
|
|
<View style={styles.actionsRow}>
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, styles.addBtn]}
|
|
onPress={onAddPress}
|
|
activeOpacity={0.75}>
|
|
<Icon name="add-circle-outline" size={16} color="#FFFFFF" />
|
|
<Text style={[styles.actionText, styles.addText]}>Add</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.actionBtn}
|
|
onPress={onViewAllPress}
|
|
activeOpacity={0.75}>
|
|
<Icon name="eye-outline" size={16} color={colors.icon} />
|
|
<Text style={styles.actionText}>View All</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|