import React, { useState, useRef } from "react";
import html2canvas from "html2canvas";
export default function StoriesBuilder() {
const [projectName, setProjectName] = useState("");
const [price, setPrice] = useState("");
const [area, setArea] = useState("");
const [imageMain, setImageMain] = useState(null);
const [imagePlan, setImagePlan] = useState(null);
const storyRef = useRef(null);
const pricePerMeter = price && area ? (price / area).toFixed(0) : 0;
const handleImage = (e, setter) => {
const file = e.target.files[0];
if (file) {
setter(URL.createObjectURL(file));
}
};
const exportToPNG = async () => {
if (!storyRef.current) return;
const canvas = await html2canvas(storyRef.current);
const link = document.createElement("a");
link.download = "story.png";
link.href = canvas.toDataURL("image/png");
link.click();
};
return (
);
}
Stories Constructor (Real Estate)
{/* Inputs */} setProjectName(e.target.value)}
/> setPrice(e.target.value)}
/> setArea(e.target.value)}
/>
{/* Export Button */}
{/* Story Preview */}
handleImage(e, setImageMain)} />
handleImage(e, setImagePlan)} />
{imageMain && (
)}
{imagePlan && (
)}
{projectName || "Название ЖК"}
Цена: ${price || "—"}
Площадь: {area || "—"} м²
$/м²: {pricePerMeter || "—"}