feat: moznost nahrat podklad cenovky aj ako PNG

src/components/editor/BadgeEditorModal.tsx

@@ -280,11 +280,12 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
     setSelectedLayerId(newBadge.layersConfig[0].id);
   };
 
-  // Upload vlastného SVG súboru
+  // Upload vlastného SVG alebo PNG súboru ako podkladu
-  const handleSvgUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleBackgroundUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || !activeBadge) return;
 
+    if (file.type.includes('svg') || file.name.toLowerCase().endsWith('.svg')) {
       const reader = new FileReader();
       reader.onload = (event) => {
         const content = event.target?.result as string;
@@ -298,6 +299,33 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
         }
       };
       reader.readAsText(file);
+    } else if (
+      file.type.includes('png') ||
+      file.type.includes('image/') ||
+      file.name.toLowerCase().endsWith('.png') ||
+      file.name.toLowerCase().endsWith('.jpg') ||
+      file.name.toLowerCase().endsWith('.jpeg') ||
+      file.name.toLowerCase().endsWith('.webp')
+    ) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const dataUrl = event.target?.result as string;
+        const img = new Image();
+        img.onload = () => {
+          const w = img.naturalWidth || 140;
+          const h = img.naturalHeight || 95;
+          const svgContent = `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image href="${dataUrl}" xlink:href="${dataUrl}" width="${w}" height="${h}" preserveAspectRatio="xMidYMid meet"/></svg>`;
+          setActiveBadge({
+            ...activeBadge,
+            svgRaw: svgContent
+          });
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
+    } else {
+      alert('Podporované sú len grafické súbory vo formáte SVG alebo PNG.');
+    }
   };
 
   const activeLayer =
@@ -834,18 +862,21 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
                   </div>
                 </div>
 
-                {/* Upload vlastného SVG podkladu */}
+                {/* Upload vlastného SVG alebo PNG podkladu */}
                 <div className="border border-dashed border-gray-300 rounded-2xl p-3 bg-gray-50/60">
                   <label className="block text-xs font-bold text-gray-800 mb-1 flex items-center gap-1.5">
                     <Upload className="w-3.5 h-3.5 text-[#e2001a]" />
-                    Nahrať vlastný tvar SVG (Podklad)
+                    Nahrať vlastný podklad cenovky (SVG alebo PNG)
                   </label>
                   <input
                     type="file"
-                    accept=".svg"
+                    accept=".svg,.png,.jpg,.jpeg,.webp,image/svg+xml,image/png,image/jpeg,image/webp"
-                    onChange={handleSvgUpload}
+                    onChange={handleBackgroundUpload}
                     className="text-xs text-gray-500 file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-gray-200 file:text-gray-700 hover:file:bg-gray-300 cursor-pointer w-full"
                   />
+                  <p className="text-[10px] text-gray-500 mt-1">
+                    Podporuje SVG vektorové tvary aj priehľadné PNG obrázky.
+                  </p>
                 </div>
 
                 {/* Rýchle pridanie vrstiev */}

src/lib/badgeUtils.ts

@@ -110,7 +110,7 @@ export function renderCleanBadgeSvg(
     return `<text x="${layer.x}" y="${layer.y}" text-anchor="${anchor}" dominant-baseline="central" font-family="${fontFamily}" font-size="${fontSize}px" font-weight="${fontWeight}" fill="${fill}">${contentSvg}</text>`;
   }).join('\n    ');
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vb}" width="${displayWidth}" height="${displayHeight}" style="display:block;max-width:100%;height:auto;">
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${vb}" width="${displayWidth}" height="${displayHeight}" style="display:block;max-width:100%;height:auto;">
     ${innerBg}
     ${textLayersSvg}
   </svg>`;