function MainComponent() { const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [processedImage, setProcessedImage] = useState(null); const handleDownload = useCallback(()=>{ if (!processedImage) return; const canvas = document.createElement("canvas"); canvas.width = 6 * 300; canvas.height = 4 * 300; const ctx = canvas.getContext("2d"); if (!ctx) return; ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); const img = new Image(); img.crossOrigin = "anonymous"; img.src = processedImage; img.onload = ()=>{ const positions = [ { x: 0.5, y: 0.3 }, { x: 2.5, y: 0.3 }, { x: 4.5, y: 0.3 }, { x: 0.5, y: 2.4 }, { x: 2.5, y: 2.4 }, { x: 4.5, y: 2.4 } ]; positions.forEach((pos)=>{ // Draw the image ctx.drawImage(img, pos.x * 300, pos.y * 300, 1.38 * 300, 1.77 * 300); // Draw cut lines ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.setLineDash([ 5, 5 ]); // Draw outer rectangle ctx.strokeRect(pos.x * 300, pos.y * 300, 1.38 * 300, 1.77 * 300); // Draw corner marks const cornerLength = 20; const x = pos.x * 300; const y = pos.y * 300; const width = 1.38 * 300; const height = 1.77 * 300; // Top left corner ctx.beginPath(); ctx.moveTo(x - 5, y); ctx.lineTo(x - 5, y - 5); ctx.lineTo(x, y - 5); ctx.stroke(); // Top right corner ctx.beginPath(); ctx.moveTo(x + width + 5, y); ctx.lineTo(x + width + 5, y - 5); ctx.lineTo(x + width, y - 5); ctx.stroke(); // Bottom left corner ctx.beginPath(); ctx.moveTo(x - 5, y + height); ctx.lineTo(x - 5, y + height + 5); ctx.lineTo(x, y + height + 5); ctx.stroke(); // Bottom right corner ctx.beginPath(); ctx.moveTo(x + width + 5, y + height); ctx.lineTo(x + width + 5, y + height + 5); ctx.lineTo(x + width, y + height + 5); ctx.stroke(); }); canvas.toBlob((blob)=>{ if (!blob) return; const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.download = "uk-passport-photos.jpg"; link.href = url; link.click(); URL.revokeObjectURL(url); }, "image/jpeg", 1.0); }; }, [ processedImage ]); const onSubmit = useCallback(async ()=>{ try { const { url, mimeType, error } = await upload({ file }); if (error) { setError(error); return; } if (mimeType.startsWith("image/")) { setProcessedImage(url); } } catch (err) { setError("Failed to process image"); } }, [ file ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-6", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-8 space-y-8", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Passport Photo Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-lg font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Upload your photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>{ if (e.target.files) { setFile(e.target.files[0]); setProcessedImage(null); } }, className: "w-full p-3 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onSubmit, disabled: loading || !file, className: "w-full bg-blue-500 text-white py-3 px-6 rounded hover:bg-blue-600 disabled:bg-gray-400 font-roboto text-lg", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, loading ? "Processing..." : "Generate Photos"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 text-center mt-6 font-roboto", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "Built by MAZ")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mt-6 text-center font-roboto", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, error), processedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Your Passport Photos (6x4 inch sheet)"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-300 relative bg-white", style: { width: "6in", height: "4in", margin: "auto" }, __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-2 gap-4 p-4", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, [ ...Array.from({ length: 6 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative flex items-center justify-center", style: { width: "35mm", height: "45mm", margin: "auto", backgroundColor: "white" }, __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 border-2 border-dashed border-gray-300", __source: { fileName: "", lineNumber: 178, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: processedImage, alt: `Passport photo ${index + 1}`, className: "w-full h-full object-cover", style: { position: "absolute", top: "0", left: "0", width: "100%", height: "100%" }, __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex flex-col gap-2", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, "Each photo is exactly 45mm x 35mm (UK passport size)"), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 font-roboto flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }), "Download Photos"))))); }