61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { CatalogItemRowProps } from './catalogItemRow.props';
|
|
import { getStyles } from './catalogItemRow.styles';
|
|
import { useAppTheme } from '@theme';
|
|
|
|
export const CatalogItemRow: React.FC<CatalogItemRowProps> = ({
|
|
imageUrl,
|
|
title,
|
|
description,
|
|
price,
|
|
quantity,
|
|
onAdd,
|
|
onRemove,
|
|
}) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.image}>
|
|
<Text style={styles.imagePlaceholder}>{imageUrl || '🍕'}</Text>
|
|
</View>
|
|
<View style={styles.info}>
|
|
<Text style={styles.title} numberOfLines={1}>{title}</Text>
|
|
<Text style={styles.description} numberOfLines={2}>{description}</Text>
|
|
<Text style={styles.price}>₹{price}</Text>
|
|
</View>
|
|
<View style={styles.actions}>
|
|
{quantity > 0 ? (
|
|
<>
|
|
<TouchableOpacity
|
|
style={[styles.stepperButton, quantity === 0 && styles.stepperButtonDisabled]}
|
|
onPress={onRemove}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.stepperButtonText}>-</Text>
|
|
</TouchableOpacity>
|
|
<Text style={styles.quantity}>{quantity}</Text>
|
|
<TouchableOpacity
|
|
style={styles.stepperButton}
|
|
onPress={onAdd}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.stepperButtonText}>+</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={styles.stepperButton}
|
|
onPress={onAdd}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.stepperButtonText}>+</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|