37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { Button } from '../components/Button.jsx';
|
|
import { PageTransition } from '../components/PageTransition.jsx';
|
|
import '../print.css';
|
|
|
|
export default function PrintPage() {
|
|
const { state } = useLocation();
|
|
const items = state?.items || [];
|
|
const navigate = useNavigate();
|
|
const maxWidth = items.reduce((max, i) => Math.max(max, i.width), 0) || 100;
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div className="container py-4">
|
|
<div className="no-print mb-4 flex gap-2">
|
|
<Button variant="ghost" onClick={() => navigate('/generate')}>Terug</Button>
|
|
<Button variant="primary" onClick={() => window.print()}>Print</Button>
|
|
</div>
|
|
<div className="a4-preview">
|
|
<div className="print-grid" style={{ '--plate-width': `${maxWidth}mm` }}>
|
|
{items.map((item, idx) => (
|
|
<img
|
|
key={idx}
|
|
src={item.src}
|
|
alt={`plate-${idx}`}
|
|
className="plate"
|
|
style={{ width: `${item.width}mm`, height: `${item.height}mm` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
}
|