TrustStars
Hodnocení produktu i shopu. Mód stars = 5 hvězd s desetinným plněním; compact = jedna hvězda + 4,8 z 5 · 124 hodnocení (Heureka styl). Hvězdy jsou vždy jantarové.
2
Módy
stars · compact
3
Velikosti
14 · 16 · 20px
0,1
Krok
desetinné plnění
★
Barva
vždy --warning
Módy
stars pro PDP a karty; compact pro hustá místa a trust řádky.
4,8(124)
stars
4,8 z 5(124 hodnocení)
compact
Velikosti
sm · md (default) · lg, oba módy vedle sebe.
4,7(88)
4,7 z 5(88 hodnocení)
sm
4,7(88)
4,7 z 5(88 hodnocení)
md
4,7(88)
4,7 z 5(88 hodnocení)
lg
Desetinná hodnocení
Plnění je přesné na procenta — 4,3 = 86 % šířky.
5,0
4,8
4,3
3,5
2,0
Se zdrojem
source připíše původ recenzí (Heureka, Google).
4,9 z 5(2 480 hodnocení)/ Heureka
4,7 z 5(1 203 hodnocení)/ Google
Na gradientu (onDark)
tone='onDark' — hvězdy zůstávají jantarové, číslo a počet zbělají. Pro trust marky na hero, hlavičkách kategorií a USP pruzích.
grad-cover — trust na hero
4,9(342)
4,8 z 5(2 480 hodnocení)/ Heureka
Props & pravidla
<TrustStars>
components/shared/trust-stars.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| rating | number | — | 0–5, desetinné (povinné) |
| count | number | — | Počet hodnocení |
| source | string | — | Původ (Heureka, Google) |
| mode | "stars" | "compact" | "stars" | 5 hvězd vs 1 + text |
| size | "sm" | "md" | "lg" | "md" | 14 / 16 / 20px |
| compactLabel | string | "hodnocení" | Slovo za počtem (compact) |
| tone | "light" | "onDark" | "light" | onDark = bílé číslo (hvězdy jantarové) |
Hvězdy jsou vždy jantarové (
--warning) — nikdy barva kategorie ani červená. Prázdné = hairline. Číslo i počet jedou tabular .num. Na gradientu / glassu nasaď tone="onDark" — číslo zbělá, hvězdy zůstanou jantarové.