34 lines
979 B
TypeScript
34 lines
979 B
TypeScript
// components/DeviceQrCode.tsx
|
|
'use client';
|
|
|
|
import { QRCodeSVG } from 'qrcode.react';
|
|
|
|
type DeviceQrCodeProps = {
|
|
inventoryNumber: string;
|
|
size?: number;
|
|
};
|
|
|
|
export function DeviceQrCode({ inventoryNumber, size = 180 }: DeviceQrCodeProps) {
|
|
const baseUrl = process.env.NEXT_PUBLIC_APP_URL ?? '';
|
|
|
|
// Immer vollständige URL für externe Scanner erzeugen
|
|
const qrValue = baseUrl
|
|
? `${baseUrl.replace(/\/$/, '')}/devices/${encodeURIComponent(inventoryNumber)}`
|
|
: inventoryNumber;
|
|
|
|
return (
|
|
<div className="inline-flex flex-col items-center gap-2">
|
|
<QRCodeSVG
|
|
value={qrValue}
|
|
size={size}
|
|
level="M" // Fehlertoleranz
|
|
includeMargin // wichtiger weißer Rand (= Quiet Zone)
|
|
bgColor="#FFFFFF"
|
|
fgColor="#000000"
|
|
/>
|
|
{/* Optional: zum Debuggen den Wert anzeigen */}
|
|
{/* <p className="text-[10px] text-gray-500 break-all text-center">{qrValue}</p> */}
|
|
</div>
|
|
);
|
|
}
|