1
0
Fork 0

chore(shared): Consolidate tab components

This commit is contained in:
Joost De Cock 2023-08-28 20:30:00 +02:00
parent 44a3b194cc
commit c98a67885c
6 changed files with 50 additions and 43 deletions

View file

@ -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

View file

@ -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} />