wip: Started working on new development environment

packages/freesewing.shared/components/workbench/measurements.js

@@ -0,0 +1,48 @@
+import MeasurementInput from './input-measurement.js'
+
+const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
+
+  // Method to handle measurement updates
+  const updateMeasurements = (value, m=false) => {
+    if (m === false) {
+      // Set all measurements
+    } else {
+      // Set one measurement
+      const newValues = {...gist.measurements}
+      newValues[m] = value.trim()
+      updateGist('measurements', newValues)
+    }
+  }
+  // Save us some typing
+  const inputProps = { app, updateMeasurements, gist }
+
+  return (
+    <div className="m-auto max-w-prose">
+      <h1>
+        <span className='capitalize mr-4 opacity-70'>
+          {pattern.config.name}:
+        </span>
+        {app.t('measurements')}
+      </h1>
+      {pattern.config.measurements && (
+        <>
+          <h2>{app.t('requiredMeasurements')}</h2>
+          {pattern.config.measurements.map(m => (
+            <MeasurementInput key={m} m={m} {...inputProps} />
+          ))}
+        </>
+      )}
+      {pattern.config.optionalMeasurements && (
+        <>
+          <h2>{app.t('optionalMeasurements')}</h2>
+          {pattern.config.optionalMeasurements.map(m => (
+            <MeasurementInput key={m} m={m} {...inputProps} />
+          ))}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WorkbenchMeasurements
+