ecommerce-skin-food

A reusable React + TypeScript UI component library for Food Ecommerce Product Detail Pages (PDP).

Features

• ProductCard: A complete card component that assembles the gallery, info, and attributes.
• ProductGallery: Image gallery with thumbnail selection.
• ProductInfo: Displays product name, price, and description.
• ProductAttributes: Handles nutritional info (protein, carbs, fat) and veg/non-veg status.
• Responsive: Mobile-first design that scales up to desktop.
• Customizable: Built with Tailwind CSS classes.

Installation

npm install ecommerce-skin-food
# or
yarn add ecommerce-skin-food

Usage

Import the components and types in your React application:

import { ProductCard, FoodProduct } from 'ecommerce-skin-food';

const burger: FoodProduct = {
  id: '1',
  name: 'Spicy Chicken Burger',
  price: 199,
  images: ['/burger1.jpg', '/burger2.jpg'],
  vegType: 'Non-Veg',
  nutritionalInfo: {
    protein: '25g',
    carbs: '40g',
    fat: '20g'
  },
  description: 'A delicious spicy chicken burger with fresh lettuce...'
};

function App() {
  return (
    <div className="p-4 bg-gray-50 min-h-screen">
      <ProductCard 
        product={burger} 
        onAddToCart={(item, qty) => console.log('Added', item, qty)}
        onBuyNow={(item, qty) => console.log('Buy Now', item, qty)}
      />
    </div>
  );
}

Requirements

• React 18+
• Tailwind CSS (recommended for styling to match the intended look, though styles are inline/standard CSS class based)