46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { Product } from "@/lib/product"
|
|
import { ImageBackground, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
|
|
import { AnimatedStyle } from "react-native-reanimated";
|
|
|
|
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={styles.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.priceDisplay } </Text>
|
|
</ImageBackground>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
image: {
|
|
|
|
},
|
|
text: {
|
|
|
|
},
|
|
tile: {
|
|
|
|
},
|
|
}) |