ProductCard
ProductCard component of the UILaunch design system, how to import it and its usage.
🛍️ ProductCard
The ProductCard component displays a concise summary of a product including its name, description, price, and image. It supports interactivity and availability status, making it ideal for product listings, catalogs, or shopping apps. It can also indicate whether a product is available or not through opacity and a badge.
📦 Import
import ProductCard from '@madefordevs1999/ui-launch-native/system/templates/ProductCard';🧩 Usage
import ProductCard from '@madefordevs1999/ui-launch-native/system/templates/ProductCard';
const exampleProduct = {
cover: 'https://cdn.pixabay.com/photo/2021/12/16/11/08/mount-fuji-6874364_1280.jpg',
description: 'Product description',
name: 'Product name',
id: 'product_id',
price: 299.90,
};
const App = () => {
return (
<ProductCard
size="medium"
product={exampleProduct}
available={false}
unavailableText="Out of Stock"
onPress={() => console.log('Product pressed!')}
/>
);
};
export default App;🎯 Result Example
📜 ProductCard Props
| Prop Name | Type | Default Value | Description |
|---|---|---|---|
size | 'medium' | 'large' | — | The size of the card (currently used for future scalability). |
available | boolean | — | Whether the product is available. Affects opacity and interaction. |
product | ProductInfo | — | The product information to display. |
onPress | () => void | undefined | Function triggered when the card is pressed. Disabled when unavailable. |
unavailableText | string | 'No disponible' | Text displayed inside the badge when the product is not available. |