Refactor Simulations component layout: streamline event handling and add comparison functionality

This commit is contained in:
2025-04-30 12:46:00 +05:30
parent 73f9bb29f7
commit 304d6689c1

View File

@@ -153,13 +153,25 @@ const Simulations: React.FC = () => {
/>
</div>
{products.length > 1 && (
<>
<div
className="remove-button"
onClick={() => handleRemoveProduct(product.productId)}
>
<RemoveIcon />
</div>
)}
</div>
))}
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, productsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
<div className="simulation-process section">
<button
@@ -171,10 +183,23 @@ const Simulations: React.FC = () => {
<ArrowIcon />
</div>
</button>
{openObjects && events.map((event, index) => <List key={index} val={event} />)}
{openObjects &&
events.map((event, index) => <List key={index} val={event} />)}
</div>
<div className="compare-simulations-container">
<div className="compare-simulations-header">
Need to Compare Layout?
</div>
<div className="content">
Click <span>'Compare'</span> to review and analyze the layout
differences between them.
</div>
<div className="input">
<input type="button" value={"Compare"} className="submit" />
</div>
</div>
</div>
</>
)}
{selectedAsset && (
<RenderOverlay>
@@ -196,12 +221,6 @@ const Simulations: React.FC = () => {
</RenderOverlay>
)}
</div>
))}
</div>
</div>
</div>
</div>
</div>
)
};