51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
// components/DeviceQrCode.tsx
|
||
'use client';
|
||
|
||
import { QRCodeSVG } from 'qrcode.react';
|
||
|
||
type DeviceQrCodeProps = {
|
||
inventoryNumber: string | null | undefined;
|
||
size?: number;
|
||
};
|
||
|
||
export function DeviceQrCode({ inventoryNumber, size = 180 }: DeviceQrCodeProps) {
|
||
// 1. Guard: ohne Inventarnummer kein QR
|
||
if (!inventoryNumber) {
|
||
if (process.env.NODE_ENV === 'development') {
|
||
console.warn('DeviceQrCode: inventoryNumber fehlt oder ist undefined/null', {
|
||
inventoryNumber,
|
||
});
|
||
}
|
||
return (
|
||
<p className="text-xs text-red-600">
|
||
Kein Inventarcode vorhanden – QR-Code kann nicht erzeugt werden.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
const baseUrl = process.env.NEXT_PUBLIC_APP_URL ?? '';
|
||
|
||
// Immer vollständige URL für externe Scanner erzeugen
|
||
const appBase = baseUrl.replace(/\/$/, '');
|
||
|
||
const qrValue = appBase
|
||
? `${appBase}/devices?device=${encodeURIComponent(inventoryNumber)}`
|
||
: `/devices?device=${encodeURIComponent(inventoryNumber)}`;
|
||
|
||
return (
|
||
<div className="inline-flex flex-col items-center gap-2">
|
||
{/* Debug-Hinweis, kannst du nach dem Testen entfernen */}
|
||
{/* <div className="text-[10px] break-all text-gray-500">{qrValue}</div> */}
|
||
|
||
<QRCodeSVG
|
||
value={qrValue}
|
||
size={size}
|
||
level="M"
|
||
includeMargin
|
||
bgColor="#FFFFFF"
|
||
fgColor="#000000"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|