Добавлена генерация QR кода через существующую библиотеку qrcode

This commit is contained in:
Umbrix Dev
2026-02-06 02:09:19 +03:00
parent 2e1ec469fc
commit 8bf35509bb

View File

@@ -1,7 +1,7 @@
// Setup Wizard - пошаговая настройка после создания подписки // Setup Wizard - пошаговая настройка после создания подписки
'use client'; 'use client';
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react'; import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react';
interface SetupWizardProps { interface SetupWizardProps {
@@ -32,6 +32,30 @@ export default function SetupWizard({
const [selectedLocations, setSelectedLocations] = useState<string[]>([]); const [selectedLocations, setSelectedLocations] = useState<string[]>([]);
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const [showQR, setShowQR] = useState(false); const [showQR, setShowQR] = useState(false);
const [qrDataUrl, setQrDataUrl] = useState<string>('');
// Генерация QR кода при открытии финального шага
useEffect(() => {
if (step === 'final' && subscriptionUrl && !qrDataUrl) {
import('qrcode').then((QRCode) => {
QRCode.toDataURL(subscriptionUrl, {
width: 300,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF',
},
errorCorrectionLevel: 'H',
})
.then((dataUrl) => {
setQrDataUrl(dataUrl);
})
.catch((err) => {
console.error('Failed to generate QR code:', err);
});
});
}
}, [step, subscriptionUrl, qrDataUrl]);
// Локации для выбора (для тарифа "Расширенный") // Локации для выбора (для тарифа "Расширенный")
const locations = [ const locations = [
@@ -451,10 +475,16 @@ export default function SetupWizard({
</button> </button>
)} )}
{showQR && ( {showQR && qrDataUrl && (
<div className="p-6 bg-white rounded-xl"> <div className="p-6 rounded-xl" style={{ background: 'var(--text-white)' }}>
<div className="text-center text-slate-800 text-sm mb-2">QR код</div> <img
<div className="text-xs text-slate-600 break-all">{subscriptionUrl}</div> src={qrDataUrl}
alt="QR код подписки"
className="w-full h-auto"
/>
<div className="mt-3 text-center text-xs break-all" style={{ color: 'var(--bg-card)' }}>
{subscriptionUrl}
</div>
</div> </div>
)} )}