60 lines
2.6 KiB
JSON
60 lines
2.6 KiB
JSON
{
|
|
"name": "ProductDetailCard",
|
|
"description": "Product detail page with image carousel, variants, rating, and action buttons.",
|
|
"details": "Use as a standalone product page or embed as a section. Layout prop controls padding: 'page' adds top page padding for navbar offset, 'section' uses standard section padding. Image gallery uses embla carousel with prev/next navigation. Variants (size, color, quantity, etc.) are rendered as select dropdowns via the variants array. Star rating is shown by default and can be hidden or use a custom icon.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"name": {
|
|
"required": true,
|
|
"example": "Eclipse Motion Pro",
|
|
"minChars": 2,
|
|
"maxChars": 80
|
|
},
|
|
"price": {
|
|
"required": true,
|
|
"example": "$150.00",
|
|
"minChars": 1,
|
|
"maxChars": 20
|
|
},
|
|
"description": {
|
|
"required": false,
|
|
"example": "Premium athletic sneaker with advanced cushioning technology.",
|
|
"minChars": 10,
|
|
"maxChars": 300
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"layout": "'page' | 'section'",
|
|
"name": "string",
|
|
"price": "string",
|
|
"showRating?": "boolean (default: true)",
|
|
"rating?": "number (default: 0)",
|
|
"ratingIcon?": "LucideIcon (default: Star)",
|
|
"description?": "string",
|
|
"images": "Array<{ src: string; alt: string }>",
|
|
"variants?": "Array<{ label: string; options: string[]; selected: string; onChange: (value: string) => void }>",
|
|
"quantity?": "{ label: string; options: string[]; selected: string; onChange: (value: string) => void }",
|
|
"buttons": "ButtonConfig[]",
|
|
"className?": "string",
|
|
"imageContainerClassName?": "string",
|
|
"infoContainerClassName?": "string",
|
|
"nameClassName?": "string",
|
|
"priceClassName?": "string",
|
|
"descriptionClassName?": "string",
|
|
"variantSelectClassName?": "string",
|
|
"variantLabelClassName?": "string",
|
|
"buttonClassName?": "string"
|
|
},
|
|
"usageExample": "<ProductDetailCard layout=\"page\" name=\"Eclipse Motion Pro\" price=\"$150.00\" rating={4} images={[{ src: '/img/product1.jpg', alt: 'Front view' }, { src: '/img/product2.jpg', alt: 'Side view' }]} variants={[{ label: 'Size', options: ['S', 'M', 'L', 'XL'], selected: selectedSize, onChange: setSelectedSize }]} quantity={{ label: 'Quantity', options: ['1', '2', '3', '4', '5'], selected: selectedQuantity, onChange: setSelectedQuantity }} buttons={[{ text: 'Add To Cart', onClick: () => console.log('added') }]} />",
|
|
"do": [
|
|
"Use for general use"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|