Product Spotlight

Рекомендованный товар: фото с пометкой, цена, рейтинг и действия. Pro · Магазин и платежи › Каталог

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add product-spotlight

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ProductSpotlight } from 'valyro-ui-pro';

Prop	Type	Default
`heading`	`ReactNode`		Line above the card: "Best match: Drift Runner".
`reason`	`ReactNode`		Why it was picked, under the heading.
`imageSrc` *	`string`		Product photo.
`imageAlt` *	`string`		Text alternative of the photo.
`imageBadge`	`ReactNode`		Chip over the photo: stock, a discount.
`imageBadgeTone`	`'success' \| 'warning' \| 'danger' \| 'accent' \| 'neutral'`	`'success'`	Color of the chip. Default `success`.
`meta`	`ReactNode`		Small uppercase line: "Shoes · Bone".
`name` *	`ReactNode`		Product name.
`price` *	`number`		Price in the currency's major unit.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`rating`	`number`		Average rating out of 5.
`reviewCount`	`number`		Number of reviews after the score.
`description`	`ReactNode`		A sentence or two about fit and use.
`actions`	`ReactNode`		Buttons at the bottom.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading or, without it, of the name (default 3).
`locale`	`string`		BCP 47 locale for the price and counts.
`labels`	`Partial<ProductSpotlightLabels>`		Overrides for the built-in English text; keys left out keep their defaults.