Spaces:
Running
Running
File size: 3,236 Bytes
c993983 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import React from 'react';
import './TutorialPanel.css';
interface Props {
isOpen: boolean;
onClose: () => void;
}
const TutorialPanel: React.FC<Props> = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<div className="tutorial-panel">
<div className="tutorial-header">
<h3>🚀 Quick Start Tutorial</h3>
<button className="tutorial-close" onClick={onClose}>×</button>
</div>
<div className="tutorial-scroll">
<div className="tutorial-step">
<div className="step-circle">1</div>
<div className="step-content">
<strong>Locate your site</strong>
<p>Use the 🔍 search bar in the top menu to find your facility or site area.</p>
</div>
</div>
<div className="tutorial-step">
<div className="step-circle">2</div>
<div className="step-content">
<strong>Lock the Map</strong>
<p>When you've framed your site, click <strong>🔓 Lock Map</strong>. This enables the placement and editing mode.</p>
</div>
</div>
<div className="tutorial-step">
<div className="step-circle">3</div>
<div className="step-content">
<strong>Add Processes</strong>
<p>Click <strong>⚙️ Add Process</strong> in the top menu to create a new process group for your site.</p>
</div>
</div>
<div className="tutorial-step">
<div className="step-circle">4</div>
<div className="step-content">
<strong>Geospatial Placement</strong>
<p>Click the <strong>📍 icon</strong> next to a process name in the left panel, then click on the map to place its marker.</p>
</div>
</div>
<div className="tutorial-step">
<div className="step-circle">5</div>
<div className="step-content">
<strong>Enter Stream Data</strong>
<p>Expand a process to add <strong>Hot/Cold Streams</strong>. Enter Temperatures (°C) and CP (kW/K) to track heat loads.</p>
</div>
</div>
<div className="tutorial-step">
<div className="step-circle">6</div>
<div className="step-content">
<strong>Analyze Potential</strong>
<p>Switch to the <strong>Potential Analysis</strong> page in the sidebar to see energy savings and pinch integration curves.</p>
</div>
</div>
<div className="tutorial-footer">
<p>💡 <em>Tip: Double-click map bubbles to jump to their data editing controls in the sidebar.</em></p>
</div>
</div>
</div>
);
};
export default TutorialPanel;
|