QRGenerator component

import React, { useState, useRef, useEffect } from 'react';
import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
import { Download, QrCode, Settings2, Link as LinkIcon, Wifi, User, Mail, Image as ImageIcon, Trash2 } from 'lucide-react';

export default function QRGenerator() {
  // Component implementation
}

<div className="tabs-container">
  <button className={`tab-btn ${activeTab === 'url' ? 'active' : ''}`} 
          onClick={() => setActiveTab('url')}>
    <LinkIcon size={18} /> URL
  </button>
  <button className={`tab-btn ${activeTab === 'wifi' ? 'active' : ''}`} 
          onClick={() => setActiveTab('wifi')}>
    <Wifi size={18} /> WiFi
  </button>
  <button className={`tab-btn ${activeTab === 'vcard' ? 'active' : ''}`} 
          onClick={() => setActiveTab('vcard')}>
    <User size={18} /> Contacto
  </button>
  <button className={`tab-btn ${activeTab === 'email' ? 'active' : ''}`} 
          onClick={() => setActiveTab('email')}>
    <Mail size={18} /> Email
  </button>
</div>

useEffect(() => {
  switch (activeTab) {
    case 'url':
      setQrValue(urlData || 'https://');
      break;
    case 'wifi':
      setQrValue(`WIFI:S:${wifiData.ssid};T:${wifiData.encryption};P:${wifiData.password};H:${wifiData.hidden};;`);
      break;
    case 'vcard':
      const vcard = `BEGIN:VCARD\nVERSION:3.0\nN:${vcardData.lastName};${vcardData.firstName};;;\nFN:${vcardData.firstName} ${vcardData.lastName}\nORG:${vcardData.company}\nTEL;TYPE=CELL:${vcardData.phone}\nEMAIL:${vcardData.email}\nEND:VCARD`;
      setQrValue(vcard);
      break;
    case 'email':
      setQrValue(`mailto:${emailData.to}?subject=${encodeURIComponent(emailData.subject)}&body=${encodeURIComponent(emailData.body)}`);
      break;
    default:
      setQrValue('');
  }
}, [activeTab, urlData, wifiData, vcardData, emailData]);

<div className="tab-content animate-fade-in" key={activeTab}>
  {activeTab === 'url' && (
    <div className="form-group">
      <label className="form-label">Contenido / URL</label>
      <input type="text" 
             value={urlData} 
             onChange={(e) => setUrlData(e.target.value)} 
             placeholder="https://..." />
    </div>
  )}

  {activeTab === 'wifi' && (
    <div className="grid-2-cols">
      <div className="form-group">
        <label className="form-label">Nombre de Red (SSID)</label>
        <input type="text" 
               value={wifiData.ssid} 
               onChange={(e) => setWifiData({ ...wifiData, ssid: e.target.value })} 
               placeholder="Mi Red WiFi" />
      </div>
      {/* Additional WiFi fields */}
    </div>
  )}
  
  {/* vcard and email forms */}
</div>

<QRCodeSVG
  value={qrValue}
  size={size}
  level={logoUrl ? 'H' : level}
  bgColor={bgColor === 'transparent' ? '#ffffff' : bgColor}
  fgColor={fgColor}
  includeMargin={true}
  imageSettings={logoUrl ? {
    src: logoUrl,
    x: undefined,
    y: undefined,
    height: size * 0.22,
    width: size * 0.22,
    excavate: true,
  } : undefined}
/>

<div style={{ display: 'none' }}>
  <QRCodeCanvas
    value={qrValue}
    size={size * 2}
    level={logoUrl ? 'H' : level}
    bgColor={bgColor}
    fgColor={fgColor}
    includeMargin={true}
    imageSettings={logoUrl ? {
      src: logoUrl, 
      height: (size * 2) * 0.22, 
      width: (size * 2) * 0.22, 
      excavate: true,
    } : undefined}
  />
</div>

<div className="qr-wrapper" ref={qrRef} style={{ backgroundColor: bgColor }}>
  {/* QR code elements */}
</div>

<div className="qr-glow" 
     style={{ 
       backgroundColor: fgColor !== '#ffffff' && fgColor !== '#000000' 
         ? fgColor 
         : 'var(--accent-color)' 
     }}>
</div>

imageSettings={logoUrl ? {
  src: logoUrl,
  height: size * 0.22,
  width: size * 0.22,
  excavate: true,
} : undefined}

const handleDownloadPNG = () => {
  const canvas = qrRef.current?.querySelector('canvas');
  if (!canvas) return;

  const pngUrl = canvas
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  
  let downloadLink = document.createElement("a");
  downloadLink.href = pngUrl;
  downloadLink.download = "qr-premium.png";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};

const handleDownloadSVG = () => {
  const svg = qrRef.current?.querySelector('svg');
  if (!svg) return;

  const svgData = new XMLSerializer().serializeToString(svg);
  const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
  const url = URL.createObjectURL(blob);

  let downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = "qr-premium-vector.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
};

const handleLogoUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => setLogoUrl(event.target.result);
    reader.readAsDataURL(file);
  }
};

import React from 'react';
import QRGenerator from './components/QRGenerator';

function App() {
  return (
    <div className="container animate-fade-in">
      <header className="header">
        <h1 className="title">Generador QR Pro</h1>
        <p className="subtitle">
          Crea, personaliza y descarga códigos QR con un diseño premium al instante.
        </p>
      </header>
      
      <main>
        <QRGenerator />
      </main>
    </div>
  );
}