Spaces:
Build error
Build error
| import { useState } from 'react'; | |
| const PrintModal = ({ isOpen, onClose, children }) => { | |
| if (!isOpen) return null; | |
| const handlePrint = () => { | |
| const printWindow = window.open('', '_blank'); | |
| printWindow.document.write('<html><head><title>Print</title>'); | |
| printWindow.document.write('<link rel="stylesheet" href="/styles/globals.css" type="text/css" />'); | |
| printWindow.document.write('</head><body>'); | |
| printWindow.document.write(document.getElementById('printable-content').innerHTML); | |
| printWindow.document.write('</body></html>'); | |
| printWindow.document.close(); | |
| printWindow.focus(); | |
| setTimeout(() => { | |
| printWindow.print(); | |
| printWindow.close(); | |
| }, 250); | |
| }; | |
| return ( | |
| <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"> | |
| <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-2xl"> | |
| <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 p-4"> | |
| <h3 className="text-xl font-semibold text-gray-900">Print Preview</h3> | |
| <button | |
| onClick={onClose} | |
| 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" | |
| > | |
| <svg | |
| className="h-6 w-6" | |
| fill="currentColor" | |
| viewBox="0 0 20 20" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <path | |
| fillRule="evenodd" | |
| 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" | |
| clipRule="evenodd" | |
| ></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div className="relative max-h-[70vh] overflow-y-auto p-6"> | |
| <div id="printable-content"> | |
| {children} | |
| </div> | |
| </div> | |
| <div className="flex items-center justify-end space-x-3 border-t border-gray-200 bg-gray-50 p-4"> | |
| <button | |
| onClick={onClose} | |
| 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" | |
| > | |
| Close | |
| </button> | |
| <button | |
| onClick={handlePrint} | |
| 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" | |
| > | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default PrintModal; |