81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
|
import MenuIcon from 'shared/components/icons/menu.js'
|
||
|
|
import OptionsIcon from 'shared/components/icons/options.js'
|
||
|
|
import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
|
||
|
|
|
||
|
|
const Modes = props => {
|
||
|
|
const entries = [
|
||
|
|
{
|
||
|
|
name: 'measurements',
|
||
|
|
title: props.app.t('app.measurements'),
|
||
|
|
onClick: () => props.setMode('measurements')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'draft',
|
||
|
|
title: props.app.t('app.draftPattern', { pattern: props.pattern.config.name }),
|
||
|
|
onClick: () => props.setMode('draft')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'test',
|
||
|
|
title: props.app.t('app.testPattern', { pattern: props.pattern.config.name }),
|
||
|
|
onClick: () => props.setMode('test')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'export',
|
||
|
|
title: props.app.t('app.export'),
|
||
|
|
onClick: () => props.setMode('export')
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<details className='py-1' open>
|
||
|
|
<summary className={`
|
||
|
|
flex flex-row uppercase gap-4 font-bold text-lg
|
||
|
|
hover:cursor-row-resize
|
||
|
|
p-2
|
||
|
|
text-base-content
|
||
|
|
sm:text-neutral-content
|
||
|
|
items-center
|
||
|
|
`}>
|
||
|
|
<span className="text-secondary-focus mr-4"><MenuIcon /></span>
|
||
|
|
<span className={`grow ${linkClasses}`}>
|
||
|
|
{props.app.t('app.modes')}
|
||
|
|
</span>
|
||
|
|
<Chevron />
|
||
|
|
</summary>
|
||
|
|
<ul className="pl-5 list-inside">
|
||
|
|
{entries.map(entry => (
|
||
|
|
<li key={entry.title} className="flex flex-row">
|
||
|
|
<button title={entry.title} className={`
|
||
|
|
grow pl-2 border-l-2
|
||
|
|
${linkClasses}
|
||
|
|
hover:border-secondary
|
||
|
|
sm:hover:border-secondary-focus
|
||
|
|
text-left
|
||
|
|
capitalize
|
||
|
|
${entry.name === props.mode
|
||
|
|
? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
|
||
|
|
: 'text-base-content sm:text-neutral-content'
|
||
|
|
}
|
||
|
|
`} onClick={entry.onClick}>
|
||
|
|
<span className={`
|
||
|
|
text-3xl mr-2 inline-block p-0 leading-3
|
||
|
|
${entry.name === props.mode
|
||
|
|
? 'text-secondary sm:text-secondary-focus translate-y-1'
|
||
|
|
: 'translate-y-3'
|
||
|
|
}
|
||
|
|
`}>
|
||
|
|
{entry.name === props.mode ? <>•</> : <>°</>}
|
||
|
|
</span>
|
||
|
|
<span className={entry.name === props.mode ? 'font-bold' : ''}>
|
||
|
|
{ entry.title }
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</details>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Modes
|