Spaces:
Build error
Build error
Upload components/PrintModal.jsx with huggingface_hub
Browse files- components/PrintModal.jsx +68 -0
components/PrintModal.jsx
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { useState } from 'react';
|
| 2 |
+
|
| 3 |
+
const PrintModal = ({ isOpen, onClose, children }) => {
|
| 4 |
+
if (!isOpen) return null;
|
| 5 |
+
|
| 6 |
+
const handlePrint = () => {
|
| 7 |
+
const printWindow = window.open('', '_blank');
|
| 8 |
+
printWindow.document.write('<html><head><title>Print</title>');
|
| 9 |
+
printWindow.document.write('<link rel="stylesheet" href="/styles/globals.css" type="text/css" />');
|
| 10 |
+
printWindow.document.write('</head><body>');
|
| 11 |
+
printWindow.document.write(document.getElementById('printable-content').innerHTML);
|
| 12 |
+
printWindow.document.write('</body></html>');
|
| 13 |
+
printWindow.document.close();
|
| 14 |
+
printWindow.focus();
|
| 15 |
+
setTimeout(() => {
|
| 16 |
+
printWindow.print();
|
| 17 |
+
printWindow.close();
|
| 18 |
+
}, 250);
|
| 19 |
+
};
|
| 20 |
+
|
| 21 |
+
return (
|
| 22 |
+
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-gray-900 bg-opacity-50 backdrop-blur-sm">
|
| 23 |
+
<div className="relative w-full max-w-4xl rounded-lg bg-white shadow-2xl">
|
| 24 |
+
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 p-4">
|
| 25 |
+
<h3 className="text-xl font-semibold text-gray-900">Print Preview</h3>
|
| 26 |
+
<button
|
| 27 |
+
onClick={onClose}
|
| 28 |
+
className="rounded-lg p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
| 29 |
+
>
|
| 30 |
+
<svg
|
| 31 |
+
className="h-6 w-6"
|
| 32 |
+
fill="currentColor"
|
| 33 |
+
viewBox="0 0 20 20"
|
| 34 |
+
xmlns="http://www.w3.org/2000/svg"
|
| 35 |
+
>
|
| 36 |
+
<path
|
| 37 |
+
fillRule="evenodd"
|
| 38 |
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
| 39 |
+
clipRule="evenodd"
|
| 40 |
+
></path>
|
| 41 |
+
</svg>
|
| 42 |
+
</button>
|
| 43 |
+
</div>
|
| 44 |
+
<div className="relative max-h-[70vh] overflow-y-auto p-6">
|
| 45 |
+
<div id="printable-content">
|
| 46 |
+
{children}
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
<div className="flex items-center justify-end space-x-3 border-t border-gray-200 bg-gray-50 p-4">
|
| 50 |
+
<button
|
| 51 |
+
onClick={onClose}
|
| 52 |
+
className="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200"
|
| 53 |
+
>
|
| 54 |
+
Close
|
| 55 |
+
</button>
|
| 56 |
+
<button
|
| 57 |
+
onClick={handlePrint}
|
| 58 |
+
className="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300"
|
| 59 |
+
>
|
| 60 |
+
Print
|
| 61 |
+
</button>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
);
|
| 66 |
+
};
|
| 67 |
+
|
| 68 |
+
export default PrintModal;
|