44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Product } from "@/lib/product"
|
|
import { ImageBackground, StyleProp, StyleSheet, Text, ViewStyle } from "react-native";
|
|
import { AnimatedStyle } from "react-native-reanimated";
|
|
import { View } from "react-native-reanimated/lib/typescript/Animated";
|
|
|
|
export type OnProductSelectedFunc = (product : Product) => any;
|
|
|
|
type MyStyle = StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
|
|
|
|
export type ProductTileProps = {
|
|
product: (Product),
|
|
onProductSelected?: OnProductSelectedFunc,
|
|
style?: {
|
|
tile?: MyStyle,
|
|
image?: MyStyle,
|
|
}
|
|
}
|
|
|
|
const FALLBACK_IMAGE = "";
|
|
|
|
export function ProductTile ({product, onProductSelected, style} : ProductTileProps) {
|
|
const src = product.attributes.image || FALLBACK_IMAGE;
|
|
return (
|
|
<View style={style?.tile}>
|
|
<ImageBackground
|
|
src={src}
|
|
resizeMode="cover"
|
|
style={styles.image}
|
|
>
|
|
<Text style={styles.text}>{product.attributes.name || `Product ${product.id}`}</Text>
|
|
<Text style={styles.text}>{ product.pricePerUnit.toString() } / {product.measurement.value} {product.measurement.unit.symbol} </Text>
|
|
</ImageBackground>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
image: {
|
|
|
|
},
|
|
text: {
|
|
|
|
},
|
|
}) |