feat: moznost pozicovania cenovky vedla produktu (uloha 8)

This commit is contained in:
Jakub_Hostacny committed 2026-10-08 10:15:39 +02:00
1 parent a82c2d5af8
commit 0aa664b08b
3 files changed
+169 -56

No files matched your search

+76
View File
@@ -757,6 +757,43 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
</div>
)}
{/* Poloha cenovky: pod / vedľa */}
<div>
<span className="text-[10px] text-gray-600 font-semibold block mb-1">Poloha cenovky</span>
<div className="grid grid-cols-2 gap-1 bg-gray-200 p-0.5 rounded-lg text-[10px] font-bold text-center">
<button
type="button"
onClick={() => {
const products = [...module.data.products];
products[pIdx].badgeLayout = 'below';
updateData({ products });
}}
className={`py-1.5 rounded transition-all flex items-center justify-center gap-1 ${
(p.badgeLayout || 'below') === 'below'
? 'bg-white text-gray-900 shadow-xs'
: 'text-gray-600 hover:text-gray-900'
}`}
>
<span>↓ Pod obrázkom</span>
</button>
<button
type="button"
onClick={() => {
const products = [...module.data.products];
products[pIdx].badgeLayout = 'side';
updateData({ products });
}}
className={`py-1.5 rounded transition-all flex items-center justify-center gap-1 ${
p.badgeLayout === 'side'
? 'bg-white text-gray-900 shadow-xs'
: 'text-gray-600 hover:text-gray-900'
}`}
>
<span>→ Vedľa obrázka</span>
</button>
</div>
</div>
{/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu */}
<div className="bg-gray-50 p-2.5 rounded-xl border border-gray-200 space-y-2">
{/* Šírka */}
@@ -1343,6 +1380,45 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
</div>
)}
{/* Poloha cenovky: pod / vedľa */}
{p.badgeCustomTemplate && (
<div>
<span className="text-[10px] text-gray-600 font-semibold block mb-1">Poloha cenovky</span>
<div className="grid grid-cols-2 gap-1 bg-gray-200 p-0.5 rounded-lg text-[10px] font-bold text-center">
<button
type="button"
onClick={() => {
const products = [...module.data.products];
products[pIdx].badgeLayout = 'below';
updateData({ products });
}}
className={`py-1.5 rounded transition-all flex items-center justify-center gap-1 ${
(p.badgeLayout || 'below') === 'below'
? 'bg-white text-gray-900 shadow-xs'
: 'text-gray-600 hover:text-gray-900'
}`}
>
<span>↓ Pod obrázkom</span>
</button>
<button
type="button"
onClick={() => {
const products = [...module.data.products];
products[pIdx].badgeLayout = 'side';
updateData({ products });
}}
className={`py-1.5 rounded transition-all flex items-center justify-center gap-1 ${
p.badgeLayout === 'side'
? 'bg-white text-gray-900 shadow-xs'
: 'text-gray-600 hover:text-gray-900'
}`}
>
<span>→ Vedľa obrázka</span>
</button>
</div>
</div>
)}
{/* Rýchle ovládanie veľkosti (Width), zarovnania a paddingu pre vernostnú cenovku */}
{p.badgeCustomTemplate && (
<div className="bg-gray-50 p-2.5 rounded-xl border border-gray-200 space-y-2">