import React from 'react'; const arrowMarker = ( ); const textStyle = { fontSize: '12px', fontFamily: 'Arial, sans-serif', fill: '#000' }; const dimStyle = { stroke: '#000', strokeWidth: 1 }; export const ElevatedPlanDiagram: React.FC = () => { return ( {arrowMarker} {/* Title / Note */} hb = 0, therefore... (conditional text moved to parent) {/* Building Center Mass (Grey) */} {/* Outer Perimeter (Columns Line) */} {/* Columns (Small Squares) */} {/* Corners */} {/* Midpoints */} {/* Dimension L1 (Width of core) */} L1 {/* Dimension L2 (Height of core) */} L2 {/* Direction Arrows */} {/* Direction 1 (Right to Left) */} {/* Wait, screenshot usually has large open arrow. Simple line arrow is fine. */} DIRECTION 1 {/* Direction 2 (Bottom to Top) */} DIRECTION 2 PLAN ); }; export const ElevatedElevationDiagram: React.FC = () => { return ( {arrowMarker} {/* Ground Line */} ELEVATION {/* Columns */} {/* Building Block */} {/* Dimensions */} {/* h (Total Height) */} h {/* h2 (Building Height) */} {/* h2 */} {/* Move h2 inside or to side? Screenshot shows it adjacent. */} h2 {/* hb (Bottom Height) */} hb {/* Z (Reference Height? 0.25h2 + hb) */} {/* Screenshot shows Z line from Ground up to some point in building */} Z {/* 0.25 h2 label */} 0.25 h2 ); };