55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
import { useState } from "react";
|
|
|
|
const PreviewDocument = ({ imageUrl }) => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [rotation, setRotation] = useState(0);
|
|
|
|
return (
|
|
<>
|
|
<div className="d-flex justify-content-start">
|
|
<i
|
|
className="bx bx-rotate-right cursor-pointer"
|
|
onClick={() => setRotation((prev) => prev + 90)}
|
|
></i>
|
|
</div>
|
|
<div
|
|
className="position-relative d-flex flex-column justify-content-center align-items-center"
|
|
style={{ minHeight: "80vh" }}
|
|
>
|
|
|
|
{loading && (
|
|
<div className="text-secondary text-center mb-2">Loading...</div>
|
|
)}
|
|
|
|
<div className="mb-3 d-flex justify-content-center align-items-center">
|
|
<img
|
|
src={imageUrl}
|
|
alt="Full View"
|
|
className="img-fluid"
|
|
style={{
|
|
maxHeight: "80vh",
|
|
objectFit: "contain",
|
|
display: loading ? "none" : "block",
|
|
transform: `rotate(${rotation}deg)`,
|
|
transition: "transform 0.3s ease",
|
|
}}
|
|
onLoad={() => setLoading(false)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="position-absolute bottom-0 start-0 justify-content-center gap-2">
|
|
<button
|
|
className="btn btn-outline-secondary"
|
|
onClick={() => setRotation(0)}
|
|
title="Reset Rotation"
|
|
>
|
|
<i className="bx bx-reset"></i> Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PreviewDocument;
|