Price & PriceTag
Cena na produktové ploše. Price je holé číslo do vět a tabulek; PriceTag je celý blok — aktuální + přeškrtnutá původní + cena za jednotku + auto výpočet (ušetříte X %). Formát je cs-CZ (lib/format).
2
Komponenty
Price · PriceTag
4
Velikosti
PriceTag sm–xl
auto
Sleva
original > amount
%
Úspora
auto výpočet
Která?
<Price>— jen číslo. Inline v textu, v tabulkách, v souhrnu košíku. Volitelně přeškrtnuté.<PriceTag>— celý blok pro kartu/PDP: aktuální cena, původní, za jednotku, úspora.
Price
Holé číslo, tabular .num. Tři velikosti + přeškrtnutá varianta.
349 Kč
sm
349 Kč
md (default)
349 Kč
lg
449 Kč
strikethrough
PriceTag
Stavy se skládají z props — sale se spustí automaticky.
449 Kč
běžná
349 Kč449 Kč
sleva
349 Kč449 Kčušetříte 22 %
sleva + úspora
449 Kč/ balení
za jednotku
349 Kč/ balení449 Kčušetříte 22 %
vše dohromady
Sale logika
Sale stav se spustí, jakmile
originalAmount > amount. Aktuální cena zčervená, původní se přeškrtne a zešedne. showSavings dopočítá procenta a vykreslí zelený pill (ušetříte X %) — zelená, protože úspora je pozitivní zisk. Na gradientu / glassu nasaď tone="onDark" — ceny zbělají a úspora je glass pill.Velikosti × kontext
Vyber velikost podle plochy.
349 Kč449 Kčušetříte 22 %
sm — karta v gridu
349 Kč449 Kčušetříte 22 %
md — default
349 Kč449 Kčušetříte 22 %
lg — PDP
349 Kč449 Kčušetříte 22 %
xl — hero / promo
Na gradientu (onDark)
tone='onDark' — bílé ceny a glass pill úspory. Pro promo hero (grad-cover) a deep produktové karty (green-950).
grad-cover — promo hero
349 Kč/ balení449 Kčušetříte 22 %
Novinka
Cordyceps extrakt
4,9 z 5(208 hodnocení)
590 Kč/ balení690 Kčušetříte 14 %
Props
<Price>
components/shared/price.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| amount | number | — | Částka (povinné) |
| currency | string | "CZK" | ISO měna pro Intl |
| strikethrough | boolean | false | Přeškrtnutí + zešednutí |
| size | "sm" | "md" | "lg" | "md" | Velikost |
| tone | "light" | "onDark" | "light" | Barva textu (gradient/glass) |
<PriceTag>
components/shared/price.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| amount | number | — | Aktuální cena (povinné) |
| originalAmount | number | — | Původní; > amount spustí sale |
| perUnit | string | — | za kapsli / dávku / balení |
| showSavings | boolean | false | Pill ušetříte X % |
| size | "sm" | "md" | "lg" | "xl" | "md" | Velikost |
| tone | "light" | "onDark" | "light" | onDark = bílé ceny + glass úspora |