Product Card Component

Build a reusable product card component that displays product information with a responsive layout using flexbox.

Requirements

The component should accept the following props:

• productName (string): The name of the product
• price (number): The product price
• imageUrl (string): URL to the product image
• description (string): A brief product description
• inStock (boolean): Whether the product is in stock

The component should display:

1. A product image at the top (100x100 pixels)
2. The product name in bold below the image
3. The price displayed with a "$" prefix
4. A description text in a smaller font
5. A status indicator that shows "In Stock" in green or "Out of Stock" in red based on the inStock prop

Styling and layout requirements:

• Use flexbox to arrange elements vertically with proper alignment
• Add consistent spacing between elements (e.g., 8-12 pixels)
• The card should have:
  • Padding of 16 pixels
  • Border radius of 8 pixels for rounded corners
  • A 1-pixel light gray border (#ddd)
• Center-align all text content
• The price should be displayed in a larger font (18-20 pixels)
• The description should use a smaller font (12-14 pixels) with gray color (#666)

Test Cases

• When all props are provided, the component renders correctly with all information displayed @test
• When inStock is true, displays "In Stock" in green color @test
• When inStock is false, displays "Out of Stock" in red color @test

Implementation

@generates

API

import React from 'react';

interface ProductCardProps {
  productName: string;
  price: number;
  imageUrl: string;
  description: string;
  inStock: boolean;
}

export const ProductCard: React.FC<ProductCardProps>;

Dependencies { .dependencies }

react-native { .dependency }

Provides the core UI components and styling system for building the product card component.