1
0
Fork 0
freesewing/sites/shared/components/workbench/views/draft/menu.mjs

78 lines
1.9 KiB
JavaScript

import {
DesignOptions,
ns as designMenuNs,
} from 'shared/components/workbench/menus/design-options/index.mjs'
import {
CoreSettings,
ns as coreMenuNs,
} from 'shared/components/workbench/menus/core-settings/index.mjs'
import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs'
import { useTranslation } from 'next-i18next'
import { nsMerge } from 'shared/utils.mjs'
import { SettingsIcon, OptionsIcon, DesktopIcon } from 'shared/components/icons.mjs'
import { Accordion } from 'shared/components/accordion.mjs'
export const ns = nsMerge(coreMenuNs, designMenuNs, uiNs)
export const DraftMenu = ({
design,
patternConfig,
setSettings,
settings,
ui,
update,
language,
account,
DynamicDocs,
view,
setView,
}) => {
const { t } = useTranslation()
const control = account.control
const menuProps = {
design,
patternConfig,
settings,
update,
language,
account,
DynamicDocs,
control,
}
const sections = [
{
name: 'designOptions',
ns: 'design-options',
icon: <OptionsIcon className="w-8 h-8" />,
menu: <DesignOptions {...menuProps} />,
},
{
name: 'coreSettings',
ns: 'core-settings',
icon: <SettingsIcon className="w-8 h-8" />,
menu: <CoreSettings {...menuProps} />,
},
{
name: 'uiSettings',
ns: 'ui-settings',
icon: <DesktopIcon className="w-8 h-8" />,
menu: <UiSettings {...menuProps} {...{ ui, view, setView }} />,
},
]
return (
<Accordion
items={sections.map((section) => [
<>
<h5 className="flex flex-row gap-2 items-center justify-between w-full">
<span>{t(`${section.ns}:${section.name}.t`)}</span>
{section.icon}
</h5>
<p>{t(`${section.ns}:${section.name}.d`)}</p>
</>,
section.menu,
])}
/>
)
}