PliWould/components/ProductTile.tsx
2024-06-28 17:04:30 -07:00

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: {
},
})