chore(shared): Consolidate tab components

sites/shared/components/inputs.mjs

@@ -15,13 +15,14 @@ import { ResetIcon, DocsIcon, UploadIcon } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { isDegreeMeasurement } from 'config/measurements.mjs'
 import { measurementAsMm, measurementAsUnits, parseDistanceInput } from 'shared/utils.mjs'
+import { Tabs, Tab } from 'shared/components/tabs.mjs'
 
 export const ns = ['account', 'measurements', 'designs']
 
 /*
  * Helper component to display a tab heading
  */
-export const Tab = ({
+export const _Tab = ({
   id, // The tab ID
   label, // A label for the tab, if not set we'll use the ID
   activeTab, // Which tab (id) is active
@@ -427,29 +428,29 @@ export const MarkdownInput = ({
 }) => {
   const [activeTab, setActiveTab] = useState('edit')
 
+  const tabs = ['edit', 'preview']
+
   return (
     <FormControl {...{ label, labelBL, labelBR, docs }} forId={id}>
-      <div className="tabs w-full">
-        {['edit', 'preview'].map((tab) => (
-          <Tab id={tab} key={tab} label={tab} {...{ activeTab, setActiveTab }} />
-        ))}
-      </div>
-      <div className="flex flex-row items-center mt-4">
-        {activeTab === 'edit' ? (
-          <textarea
-            id={id}
-            rows="5"
-            className="textarea textarea-bordered textarea-lg w-full"
-            value={current}
-            placeholder={placeholder}
-            onChange={(evt) => update(evt.target.value)}
-          />
-        ) : (
-          <div className="text-left px-4 border w-full">
+      <Tabs tabs={tabs}>
+        <Tab key="edit">
+          <div className="flex flex-row items-center mt-4">
+            <textarea
+              id={id}
+              rows="5"
+              className="textarea textarea-bordered textarea-lg w-full"
+              value={current}
+              placeholder={placeholder}
+              onChange={(evt) => update(evt.target.value)}
+            />
+          </div>
+        </Tab>
+        <Tab key="preview">
+          <div className="flex flex-row items-center mt-4">
             <Markdown>{current}</Markdown>
           </div>
-        )}
-      </div>
+        </Tab>
+      </Tabs>
     </FormControl>
   )
 }

sites/shared/components/mdx/index.mjs

@@ -3,7 +3,7 @@ import { Highlight } from './highlight.mjs'
 import { YouTube } from './youtube.mjs'
 //import { Figure } from './figure.mjs'
 import { ReadMore } from './read-more.mjs'
-import { Tab, Tabs } from './tabs.mjs'
+import { Tab, Tabs } from '../tabs.mjs'
 import { TabbedExample as Example } from './tabbed-example.mjs'
 import { HttpMethod, HttpStatusCode } from './http.mjs'
 import { ControlTip } from '../control/tip.mjs'

sites/shared/components/mdx/tabbed-example.mjs

@@ -1,4 +1,4 @@
-import { Tab, Tabs } from './tabs.mjs'
+import { Tab, Tabs } from '../tabs.mjs'
 import Md from 'react-markdown'
 import { pluginBundle } from '@freesewing/plugin-bundle'
 import { pluginFlip } from '@freesewing/plugin-flip'

sites/shared/components/tabs.mjs

@@ -4,8 +4,12 @@ export const Tabs = ({ tabs = '', active = 0, children }) => {
   // Keep active tab in state
   const [activeTab, setActiveTab] = useState(active)
 
-  // Parse tab list
-  const tablist = tabs.split(',').map((tab) => tab.trim())
+  /*
+   * Parse tab list
+   * Comma-seperated tabs passed as a string are how it works in MDX
+   */
+  const tablist = Array.isArray(tabs) ? tabs : tabs.split(',').map((tab) => tab.trim())
+
   if (!tablist) return null
 
   // Pass down activeTab and tabId for conditional rendering
@@ -19,7 +23,7 @@ export const Tabs = ({ tabs = '', active = 0, children }) => {
         {tablist.map((title, tabId) => (
           <button
             key={tabId}
-            className={`text-xl font-bold capitalize tab h-auto tab-bordered grow ${
+            className={`text-lg font-bold capitalize tab h-auto tab-bordered grow py-2 ${
               activeTab === tabId ? 'tab-active' : ''
             }`}
             onClick={() => setActiveTab(tabId)}

sites/shared/components/workbench/logs.mjs

@@ -1,6 +1,6 @@
 import Markdown from 'react-markdown'
 import { formatMm } from 'shared/utils.mjs'
-import { Tab, Tabs } from '../mdx/tabs.mjs'
+import { Tab, Tabs } from '../tabs.mjs'
 
 export const Error = ({ err }) => {
   // Include the error name and message info if it isn't already at the top

sites/shared/components/workbench/views/measies/index.mjs

@@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next'
 import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 // Components
 import { SetPicker, ns as setsNs } from 'shared/components/account/sets.mjs'
-import { Tabs, Tab } from 'shared/components/mdx/tabs.mjs'
+import { Tabs, Tab } from 'shared/components/tabs.mjs'
 import { MeasiesEditor } from './editor.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 
@@ -33,22 +33,24 @@ export const MeasiesView = ({ design, Design, settings, update, missingMeasureme
   return (
     <div className="max-w-7xl mx-auto my-6">
       <LoadingStatus />
-      <h1 className="m-auto text-center">{t('account:measurements')}</h1>
-      {missingMeasurements ? (
-        <Popout note dense noP>
-          <h5>{t('weLackSomeMeasies', { nr: missingMeasurements.length })}</h5>
-          <ol className="list list-inside ml-4 list-decimal">
-            {missingMeasurements.map((m, i) => (
-              <li key={i}>{t(`measurements:${m}`)}</li>
-            ))}
-          </ol>
-          <p className="text-lg">{t('youCanPickOrEnter')}</p>
-        </Popout>
-      ) : (
-        <Popout note compact ense oP>
-          <span className="text-lg">{t('measiesOk')}</span>
-        </Popout>
-      )}
+      <div className="max-w-xl m-auto">
+        <h2>{t('account:measurements')}</h2>
+        {missingMeasurements ? (
+          <Popout note dense noP>
+            <h5>{t('weLackSomeMeasies', { nr: missingMeasurements.length })}</h5>
+            <ol className="list list-inside ml-4 list-decimal">
+              {missingMeasurements.map((m, i) => (
+                <li key={i}>{t(`measurements:${m}`)}</li>
+              ))}
+            </ol>
+            <p className="text-lg">{t('youCanPickOrEnter')}</p>
+          </Popout>
+        ) : (
+          <Popout note compact ense oP>
+            <span className="text-lg">{t('measiesOk')}</span>
+          </Popout>
+        )}
+      </div>
       <Tabs tabs={tabs}>
         <Tab key="choose">
           <SetPicker design={design} clickHandler={loadMeasurements} />