101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
|
|
import ViewMenu from './view.js'
|
|
import DesignOptions from './design-options'
|
|
import CoreSettings from './core-settings'
|
|
import Xray from './xray'
|
|
import TestDesignOptions from './test-design-options'
|
|
|
|
export const Ul = props => <ul className="pl-5 list-inside">{props.children}</ul>
|
|
export const Li = props => (
|
|
<li className="flex flex-row hover:border-r-2 hover:border-r-secondary">
|
|
{props.children}
|
|
</li>
|
|
)
|
|
export const Details = props => (
|
|
<details className="grow" open={props.open || false}>
|
|
{props.children}
|
|
</details>
|
|
)
|
|
export const Deg = props => <span className="text-3xl inline-block p-0 leading-3 px-2 translate-y-3">°</span>
|
|
export const NoSumDiv = props => (
|
|
<div className={`
|
|
grow px-2 ml-2 border-l-2
|
|
${linkClasses}
|
|
hover:cursor-resize
|
|
hover:border-secondary
|
|
sm:hover:border-secondary-focus
|
|
text-base-content sm:text-base-content
|
|
`}>{props.children}</div>
|
|
)
|
|
export const SumDiv = props => (
|
|
<div className={`
|
|
grow pl-2 border-l-2
|
|
${linkClasses}
|
|
hover:cursor-resize
|
|
hover:border-secondary
|
|
sm:hover:border-secondary-focus
|
|
text-base-content sm:text-base-content
|
|
`}>{props.children}</div>
|
|
)
|
|
export const Summary = props => (
|
|
<summary className={`
|
|
flex flex-row
|
|
px-2
|
|
text-base-content
|
|
sm:text-base-content
|
|
hover:cursor-row-resize
|
|
items-center
|
|
`}>{props.children}</summary>
|
|
)
|
|
export const TopSummary = props => (
|
|
<summary className={`
|
|
flex flex-row gap-4 text-lg
|
|
hover:cursor-row-resize
|
|
p-2
|
|
text-base-content
|
|
sm:text-base-content
|
|
items-center
|
|
`}>
|
|
<span className="text-secondary-focus mr-4">{props.icon || null}</span>
|
|
{props.children}
|
|
</summary>
|
|
)
|
|
export const SumButton = props => (
|
|
<button className={`
|
|
flex flex-row
|
|
px-2
|
|
w-full justify-between
|
|
text-left
|
|
text-base-content
|
|
sm:text-base-content
|
|
hover:cursor-pointer
|
|
items-center
|
|
mr-4
|
|
`} onClick={props.onClick}>{props.children}</button>
|
|
)
|
|
export const TopSumTitle = props => (
|
|
<span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}>
|
|
{props.children}
|
|
</span>
|
|
)
|
|
export const SecText = props => props.raw
|
|
? <span className="text-secondary-focus" dangerouslySetInnerHTML={{__html: props.raw}} />
|
|
: <span className="text-secondary-focus">{props.children}</span>
|
|
|
|
const WorkbenchMenu = props => {
|
|
return (
|
|
<nav className="grow mb-12">
|
|
<ViewMenu {...props} />
|
|
{props.gist?._state?.view === 'draft' && (
|
|
<>
|
|
<DesignOptions {...props} />
|
|
<CoreSettings {...props} />
|
|
{props.gist.renderer === 'react' && <Xray {...props} />}
|
|
</>
|
|
)}
|
|
{props.gist?._state?.view === 'test' && <TestDesignOptions {...props} />}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default WorkbenchMenu
|