79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, useState } from 'react';
|
|
import SignatureCanvas from 'react-signature-canvas';
|
|
import { FiRefreshCw, FiCheck } from 'react-icons/fi';
|
|
|
|
interface SignaturePadProps {
|
|
onSave: (signatureData: string) => void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export default function SignaturePad({ onSave, onCancel }: SignaturePadProps) {
|
|
const sigCanvas = useRef<SignatureCanvas>(null);
|
|
const [isEmpty, setIsEmpty] = useState(true);
|
|
|
|
const clear = () => {
|
|
sigCanvas.current?.clear();
|
|
setIsEmpty(true);
|
|
};
|
|
|
|
const save = () => {
|
|
if (sigCanvas.current && !sigCanvas.current.isEmpty()) {
|
|
const dataUrl = sigCanvas.current.toDataURL('image/png');
|
|
onSave(dataUrl);
|
|
}
|
|
};
|
|
|
|
const handleEnd = () => {
|
|
setIsEmpty(sigCanvas.current?.isEmpty() || false);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="border-2 border-gray-300 rounded-lg overflow-hidden bg-white">
|
|
<SignatureCanvas
|
|
ref={sigCanvas}
|
|
canvasProps={{
|
|
className: 'w-full h-64 cursor-crosshair',
|
|
}}
|
|
onEnd={handleEnd}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={clear}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
|
|
>
|
|
<FiRefreshCw /> Zurücksetzen
|
|
</button>
|
|
|
|
{onCancel && (
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={save}
|
|
disabled={isEmpty}
|
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
<FiCheck /> Unterschrift speichern
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600">
|
|
Bitte unterschreiben Sie mit Maus, Trackpad oder Touchscreen im Feld oben.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|